Browse Source

Pull request #3377: KERNEL-14093 widget/timeinterval、editor、numbereditor、numberinterval

Merge in VISUAL/fineui from ~ZHENFEI.LI/fineui:es6 to es6

* commit '4eed1de4829ac8eb7bfee671db3a95acf93eb453':
  KERNEL-14093 refactor: widget/editor、numbereditor、numberinterval
  KERNEL-14092 refactor: widget/timeinterval
  无JIRA任务 fix: this指向错误的bug
  无JIRA任务 fix: 使用脚本漏掉的常量
es6
Zhenfei.Li-李振飞 2 years ago
parent
commit
c69d7e16c4
  1. 6
      src/case/calendar/calendar.date.item.js
  2. 65
      src/case/calendar/calendar.js
  3. 52
      src/case/calendar/calendar.year.js
  4. 26
      src/core/logic/index.js
  5. 2
      src/widget/date/calendar/popup.year.js
  6. 8
      src/widget/dynamicdate/dynamicdate.combo.js
  7. 4
      src/widget/dynamicdate/dynamicdate.popup.js
  8. 4
      src/widget/dynamicdate/dynamicdate.trigger.js
  9. 8
      src/widget/dynamicdatetime/dynamicdatetime.combo.js
  10. 5
      src/widget/dynamicdatetime/dynamicdatetime.popup.js
  11. 128
      src/widget/editor/editor.search.js
  12. 34
      src/widget/editor/editor.search.small.js
  13. 198
      src/widget/editor/editor.text.js
  14. 34
      src/widget/editor/editor.text.small.js
  15. 4
      src/widget/editor/index.js
  16. 18
      src/widget/index.js
  17. 216
      src/widget/numbereditor/number.editor.js
  18. 466
      src/widget/numberinterval/numberinterval.js
  19. 120
      src/widget/numberinterval/singleeditor/single.editor.js
  20. 255
      src/widget/timeinterval/dateinterval.js
  21. 3
      src/widget/timeinterval/index.js
  22. 244
      src/widget/timeinterval/timeinterval.js
  23. 126
      src/widget/timeinterval/timeperiods.js

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

@ -1,9 +1,9 @@
import { shortcut } from "@/core";
import { BasicButton } from "@/base";
/** /**
* 专门为calendar的视觉加的button作为私有button,不能配置任何属性也不要用这个玩意 * 专门为calendar的视觉加的button作为私有button,不能配置任何属性也不要用这个玩意
*/ */
import { shortcut } from "@/core";
import { BasicButton } from "@/base";
@shortcut() @shortcut()
export class CalendarDateItem extends BasicButton { export class CalendarDateItem extends BasicButton {
props() { props() {

65
src/case/calendar/calendar.js

@ -1,13 +1,42 @@
import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core";
/** /**
* Created by GUY on 2015/8/28. * Created by GUY on 2015/8/28.
* @class BI.Calendar * @class Calendar
* @extends BI.Widget * @extends Widget
*/ */
import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core";
@shortcut() @shortcut()
export class Calendar extends Widget { export class Calendar extends Widget {
static xtype = "bi.calendar"; static xtype = "bi.calendar";
static getPageByDateJSON (json) {
const year = getDate().getFullYear();
const month = getDate().getMonth();
let page = (json.year - year) * 12;
page += json.month - 1 - month;
return page;
}
static getDateJSONByPage (v) {
const months = getDate().getMonth();
let page = v;
// 对当前page做偏移,使到当前年初
page = page + months;
let year = parseInt(page / 12);
if (page < 0 && page % 12 !== 0) {
year--;
}
const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12);
return {
year: getDate().getFullYear() + year,
month: month + 1,
};
}
_defaultConfig () { _defaultConfig () {
const conf = super._defaultConfig(...arguments); const conf = super._defaultConfig(...arguments);
@ -222,33 +251,3 @@ export class Calendar extends Widget {
}; };
} }
} }
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 (v) {
const months = getDate().getMonth();
let page = v;
// 对当前page做偏移,使到当前年初
page = page + months;
let year = parseInt(page / 12);
if (page < 0 && page % 12 !== 0) {
year--;
}
const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12);
return {
year: getDate().getFullYear() + year,
month: month + 1,
};
},
});

52
src/case/calendar/calendar.year.js

@ -1,12 +1,33 @@
import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core";
/** /**
* Created by GUY on 2015/8/28. * Created by GUY on 2015/8/28.
* @class BI.YearCalendar * @class YearCalendar
* @extends BI.Widget * @extends Widget
*/ */
import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core";
@shortcut() @shortcut()
export class YearCalendar extends Widget { export class YearCalendar extends Widget {
static xtype = "bi.year_calendar"; static xtype = "bi.year_calendar";
static INTERVAL = 12;
// 获取显示的第一年
static getStartYear (year) {
const cur = getDate().getFullYear();
return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL;
}
static getEndYear (year) {
return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1;
}
static getPageByYear (year) {
const cur = getDate().getFullYear();
year = YearCalendar.getStartYear(year);
return (year - cur + 3) / YearCalendar.INTERVAL;
}
_defaultConfig () { _defaultConfig () {
const conf = super._defaultConfig(...arguments); const conf = super._defaultConfig(...arguments);
@ -150,28 +171,3 @@ export class YearCalendar extends Widget {
return this.years.getValue()[0]; return this.years.getValue()[0];
} }
} }
// 类方法
extend(YearCalendar, {
INTERVAL: 12,
// 获取显示的第一年
getStartYear (year) {
const cur = getDate().getFullYear();
return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL;
},
getEndYear (year) {
return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1;
},
getPageByYear (year) {
const cur = getDate().getFullYear();
year = YearCalendar.getStartYear(year);
return (year - cur + 3) / YearCalendar.INTERVAL;
},
});

26
src/core/logic/index.js

@ -1,3 +1,5 @@
import { map, isWidget } from "../2.base";
import { Direction } from "../constant";
import { Logic } from "./logic"; import { Logic } from "./logic";
import { VerticalLayoutLogic, HorizontalLayoutLogic, TableLayoutLogic, HorizontalFillLayoutLogic } from "./logic.layout"; import { VerticalLayoutLogic, HorizontalLayoutLogic, TableLayoutLogic, HorizontalFillLayoutLogic } from "./logic.layout";
@ -33,21 +35,21 @@ export const LogicFactory = {
createLogicTypeByDirection (direction) { createLogicTypeByDirection (direction) {
switch (direction) { switch (direction) {
case BI.Direction.Top: case Direction.Top:
case BI.Direction.Bottom: case Direction.Bottom:
case BI.Direction.Custom: case Direction.Custom:
return BI.LogicFactory.Type.Vertical; return LogicFactory.Type.Vertical;
case BI.Direction.Left: case Direction.Left:
case BI.Direction.Right: case Direction.Right:
return BI.LogicFactory.Type.Horizontal; return LogicFactory.Type.Horizontal;
default: default:
} }
}, },
createLogicItemsByDirection (direction) { createLogicItemsByDirection (direction) {
let items = Array.prototype.slice.call(arguments, 1); let items = Array.prototype.slice.call(arguments, 1);
items = BI.map(items, (i, item) => { items = map(items, (i, item) => {
if (BI.isWidget(item)) { if (isWidget(item)) {
return { return {
el: item, el: item,
width: item.options.width, width: item.options.width,
@ -58,13 +60,13 @@ export const LogicFactory = {
return item; return item;
}); });
switch (direction) { switch (direction) {
case BI.Direction.Bottom: case Direction.Bottom:
items.reverse(); items.reverse();
break; break;
case BI.Direction.Right: case Direction.Right:
items.reverse(); items.reverse();
break; break;
case BI.Direction.Custom: case Direction.Custom:
items = items.slice(1); items = items.slice(1);
break; break;
default: default:

2
src/widget/date/calendar/popup.year.js

@ -79,7 +79,7 @@ export class YearPopup extends Widget {
}, },
cardCreator: bind(this._createYearCalendar, this), cardCreator: bind(this._createYearCalendar, this),
afterCardCreated: () => { afterCardCreated: () => {
this.setValue(this.selectedYear); this.navigation.setValue(this.selectedYear);
}, },
}); });

8
src/widget/dynamicdate/dynamicdate.combo.js

@ -7,6 +7,14 @@ import { DynamicDatePopup } from "./dynamicdate.popup";
export class DynamicDateCombo extends Single { export class DynamicDateCombo extends Single {
static xtype = "bi.dynamic_date_combo" static xtype = "bi.dynamic_date_combo"
constants = {
popupHeight: 259,
popupWidth: 270,
comboAdjustHeight: 1,
border: 1,
iconWidth: 24,
}
props = { props = {
baseCls: "bi-dynamic-date-combo", baseCls: "bi-dynamic-date-combo",
height: 24, height: 24,

4
src/widget/dynamicdate/dynamicdate.popup.js

@ -8,6 +8,10 @@ import { DynamicDateHelper } from "./dynamicdate.caculate";
export class DynamicDatePopup extends Widget { export class DynamicDatePopup extends Widget {
static xtype = "bi.dynamic_date_popup" static xtype = "bi.dynamic_date_popup"
constants = {
tabHeight: 40,
}
props = { props = {
baseCls: "bi-dynamic-date-popup", baseCls: "bi-dynamic-date-popup",
width: 272, width: 272,

4
src/widget/dynamicdate/dynamicdate.trigger.js

@ -303,16 +303,16 @@ export class DynamicDateTrigger extends Trigger {
} }
setValue(v) { setValue(v) {
let type, value; let type, value, text;
let date = getDate(); let date = getDate();
this.storeValue = v; this.storeValue = v;
if (isNotNull(v)) { if (isNotNull(v)) {
type = v.type || DynamicDateCombo.Static; type = v.type || DynamicDateCombo.Static;
value = v.value || v; value = v.value || v;
} }
const text = this._getText(value);
switch (type) { switch (type) {
case DynamicDateCombo.Dynamic: case DynamicDateCombo.Dynamic:
text = this._getText(value);
date = DynamicDateHelper.getCalculation(value); date = DynamicDateHelper.getCalculation(value);
this._setInnerValue(date, text); this._setInnerValue(date, text);
break; break;

8
src/widget/dynamicdatetime/dynamicdatetime.combo.js

@ -11,6 +11,14 @@ export class DynamicDateTimeCombo extends Single {
static Static = 1 static Static = 1
static Dynamic = 2 static Dynamic = 2
constants = {
popupHeight: 259,
popupWidth: 270,
comboAdjustHeight: 1,
border: 1,
iconWidth: 24,
}
props = { props = {
baseCls: "bi-dynamic-date--time-combo", baseCls: "bi-dynamic-date--time-combo",
height: 24, height: 24,

5
src/widget/dynamicdatetime/dynamicdatetime.popup.js

@ -8,6 +8,11 @@ import { DynamicDateTimeCombo } from "./dynamicdatetime.combo";
export class DynamicDateTimePopup extends Widget { export class DynamicDateTimePopup extends Widget {
static xtype = "bi.dynamic_date_time_popup" static xtype = "bi.dynamic_date_time_popup"
constants = {
tabHeight: 40,
buttonHeight: 24,
}
props = { props = {
baseCls: "bi-dynamic-date-time-popup", baseCls: "bi-dynamic-date-time-popup",
width: 272, width: 272,

128
src/widget/editor/editor.search.js

@ -1,52 +1,35 @@
import { import { shortcut, Widget, extend, i18nText, emptyFn, createWidget, toPix, isKey, Controller, Events, HTapeLayout, isEndWithBlank } from "@/core";
shortcut,
Widget,
extend,
i18nText,
emptyFn,
createWidget,
toPix,
isKey,
Controller,
Events,
HTapeLayout,
isEndWithBlank
} from "@/core";
import { IconButton, Editor, IconLabel } from "@/base"; import { IconButton, Editor, IconLabel } from "@/base";
@shortcut() @shortcut()
export class SearchEditor extends Widget { export class SearchEditor extends Widget {
static xtype = "bi.search_editor"; static xtype = "bi.search_editor"
static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_FOCUS = "EVENT_FOCUS"; static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"; static EVENT_BLUR = "EVENT_BLUR"
static EVENT_CLICK = "EVENT_CLICK"; static EVENT_CLICK = "EVENT_CLICK"
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"
static EVENT_SPACE = "EVENT_SPACE"; static EVENT_SPACE = "EVENT_SPACE"
static EVENT_BACKSPACE = "EVENT_BACKSPACE"; static EVENT_BACKSPACE = "EVENT_BACKSPACE"
static EVENT_CLEAR = "EVENT_CLEAR"; static EVENT_CLEAR = "EVENT_CLEAR"
static EVENT_START = "EVENT_START"; static EVENT_START = "EVENT_START"
static EVENT_PAUSE = "EVENT_PAUSE"; static EVENT_PAUSE = "EVENT_PAUSE"
static EVENT_STOP = "EVENT_STOP"; static EVENT_STOP = "EVENT_STOP"
static EVENT_CONFIRM = "EVENT_CONFIRM"; static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_VALID = "EVENT_VALID"; static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"; static EVENT_ERROR = "EVENT_ERROR"
static EVENT_ENTER = "EVENT_ENTER"; static EVENT_ENTER = "EVENT_ENTER"
static EVENT_RESTRICT = "EVENT_RESTRICT"; static EVENT_RESTRICT = "EVENT_RESTRICT"
static EVENT_REMOVE = "EVENT_REMOVE"; static EVENT_REMOVE = "EVENT_REMOVE"
static EVENT_EMPTY = "EVENT_EMPTY"; static EVENT_EMPTY = "EVENT_EMPTY"
_defaultConfig(config) { _defaultConfig(config) {
const conf = super._defaultConfig(...arguments); const conf = super._defaultConfig(...arguments);
return extend(conf, { return extend(conf, {
baseCls: baseCls: `bi-search-editor bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
`bi-search-editor bi-focus-shadow ${
config.simple
? "bi-border-bottom"
: "bi-border bi-border-radius"}`,
height: 24, height: 24,
errorText: "", errorText: "",
watermark: i18nText("BI-Basic_Search"), watermark: i18nText("BI-Basic_Search"),
@ -58,8 +41,7 @@ export class SearchEditor extends Widget {
_init() { _init() {
super._init(...arguments); super._init(...arguments);
const self = this, const o = this.options;
o = this.options;
this.editor = createWidget(o.el, { this.editor = createWidget(o.el, {
type: Editor.xtype, type: Editor.xtype,
simple: o.simple, simple: o.simple,
@ -80,22 +62,17 @@ export class SearchEditor extends Widget {
invisible: !isKey(o.value), invisible: !isKey(o.value),
}); });
this.clear.on(IconButton.EVENT_CHANGE, () => { this.clear.on(IconButton.EVENT_CHANGE, () => {
self.setValue(""); this.setValue("");
self.fireEvent( this.fireEvent(Controller.EVENT_CHANGE, Events.STOPEDIT, this.getValue());
Controller.EVENT_CHANGE,
Events.STOPEDIT,
self.getValue()
);
// 从有内容到无内容的清空也是一次change // 从有内容到无内容的清空也是一次change
self.fireEvent(SearchEditor.EVENT_CHANGE); this.fireEvent(SearchEditor.EVENT_CHANGE);
self.fireEvent(SearchEditor.EVENT_CLEAR); this.fireEvent(SearchEditor.EVENT_CLEAR);
}); });
createWidget({ createWidget({
element: this, element: this,
height: toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
type: HTapeLayout.xtype, type: HTapeLayout.xtype,
items: [ items: [{
{
el: { el: {
type: IconLabel.xtype, type: IconLabel.xtype,
cls: "search-font", cls: "search-font",
@ -103,7 +80,7 @@ export class SearchEditor extends Widget {
width: 24, width: 24,
}, },
{ {
el: self.editor, el: this.editor,
}, },
{ {
el: this.clear, el: this.clear,
@ -111,66 +88,67 @@ export class SearchEditor extends Widget {
} }
], ],
}); });
this.editor.on(Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(Editor.EVENT_FOCUS, () => { this.editor.on(Editor.EVENT_FOCUS, () => {
self.fireEvent(SearchEditor.EVENT_FOCUS); this.fireEvent(SearchEditor.EVENT_FOCUS);
}); });
this.editor.on(Editor.EVENT_BLUR, () => { this.editor.on(Editor.EVENT_BLUR, () => {
self.fireEvent(SearchEditor.EVENT_BLUR); this.fireEvent(SearchEditor.EVENT_BLUR);
}); });
this.editor.on(Editor.EVENT_CLICK, () => { this.editor.on(Editor.EVENT_CLICK, () => {
self.fireEvent(SearchEditor.EVENT_CLICK); this.fireEvent(SearchEditor.EVENT_CLICK);
}); });
this.editor.on(Editor.EVENT_CHANGE, () => { this.editor.on(Editor.EVENT_CHANGE, () => {
self._checkClear(); this._checkClear();
self.fireEvent(SearchEditor.EVENT_CHANGE); this.fireEvent(SearchEditor.EVENT_CHANGE);
}); });
this.editor.on(Editor.EVENT_KEY_DOWN, v => { this.editor.on(Editor.EVENT_KEY_DOWN, v => {
self.fireEvent(SearchEditor.EVENT_KEY_DOWN, v); this.fireEvent(SearchEditor.EVENT_KEY_DOWN, v);
}); });
this.editor.on(Editor.EVENT_SPACE, () => { this.editor.on(Editor.EVENT_SPACE, () => {
self.fireEvent(SearchEditor.EVENT_SPACE); this.fireEvent(SearchEditor.EVENT_SPACE);
}); });
this.editor.on(Editor.EVENT_BACKSPACE, () => { this.editor.on(Editor.EVENT_BACKSPACE, () => {
self.fireEvent(SearchEditor.EVENT_BACKSPACE); this.fireEvent(SearchEditor.EVENT_BACKSPACE);
}); });
this.editor.on(Editor.EVENT_VALID, () => { this.editor.on(Editor.EVENT_VALID, () => {
self.fireEvent(SearchEditor.EVENT_VALID); this.fireEvent(SearchEditor.EVENT_VALID);
}); });
this.editor.on(Editor.EVENT_ERROR, () => { this.editor.on(Editor.EVENT_ERROR, () => {
self.fireEvent(SearchEditor.EVENT_ERROR); this.fireEvent(SearchEditor.EVENT_ERROR);
}); });
this.editor.on(Editor.EVENT_ENTER, () => { this.editor.on(Editor.EVENT_ENTER, () => {
self.fireEvent(SearchEditor.EVENT_ENTER); this.fireEvent(SearchEditor.EVENT_ENTER);
}); });
this.editor.on(Editor.EVENT_RESTRICT, () => { this.editor.on(Editor.EVENT_RESTRICT, () => {
self.fireEvent(SearchEditor.EVENT_RESTRICT); this.fireEvent(SearchEditor.EVENT_RESTRICT);
}); });
this.editor.on(Editor.EVENT_EMPTY, () => { this.editor.on(Editor.EVENT_EMPTY, () => {
self._checkClear(); this._checkClear();
self.fireEvent(SearchEditor.EVENT_EMPTY); this.fireEvent(SearchEditor.EVENT_EMPTY);
}); });
this.editor.on(Editor.EVENT_REMOVE, () => { this.editor.on(Editor.EVENT_REMOVE, () => {
self.fireEvent(SearchEditor.EVENT_REMOVE); this.fireEvent(SearchEditor.EVENT_REMOVE);
}); });
this.editor.on(Editor.EVENT_CONFIRM, () => { this.editor.on(Editor.EVENT_CONFIRM, () => {
self.fireEvent(SearchEditor.EVENT_CONFIRM); this.fireEvent(SearchEditor.EVENT_CONFIRM);
}); });
this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => {
self.fireEvent(SearchEditor.EVENT_CHANGE_CONFIRM); this.fireEvent(SearchEditor.EVENT_CHANGE_CONFIRM);
}); });
this.editor.on(Editor.EVENT_START, () => { this.editor.on(Editor.EVENT_START, () => {
self.fireEvent(SearchEditor.EVENT_START); this.fireEvent(SearchEditor.EVENT_START);
}); });
this.editor.on(Editor.EVENT_PAUSE, () => { this.editor.on(Editor.EVENT_PAUSE, () => {
self.fireEvent(SearchEditor.EVENT_PAUSE); this.fireEvent(SearchEditor.EVENT_PAUSE);
}); });
this.editor.on(Editor.EVENT_STOP, () => { this.editor.on(Editor.EVENT_STOP, () => {
self.fireEvent(SearchEditor.EVENT_STOP); this.fireEvent(SearchEditor.EVENT_STOP);
}); });
} }

34
src/widget/editor/editor.search.small.js

@ -1,20 +1,20 @@
/** import { shortcut, extend } from "@/core";
* 小号搜索框 import { SearchEditor } from "./editor.search";
* Created by GUY on 2015/9/29.
* @class BI.SmallSearchEditor @shortcut()
* @extends BI.SearchEditor export class SmallSearchEditor extends SearchEditor {
*/ static xtype = "bi.small_search_editor"
BI.SmallSearchEditor = BI.inherit(BI.SearchEditor, {
_defaultConfig: function () { _defaultConfig() {
var conf = BI.SmallSearchEditor.superclass._defaultConfig.apply(this, arguments); const conf = super._defaultConfig(...arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-small-search-editor", return extend(conf, {
height: 20 baseCls: `${conf.baseCls || ""} bi-small-search-editor`,
height: 20,
}); });
}, }
_init: function () { _init() {
BI.SmallSearchEditor.superclass._init.apply(this, arguments); super._init(...arguments);
}
} }
});
BI.shortcut("bi.small_search_editor", BI.SmallSearchEditor);

198
src/widget/editor/editor.text.js

@ -1,36 +1,57 @@
/** import { shortcut, Widget, extend, emptyFn, createWidget, toPix, Controller } from "@/core";
* guy import { Editor } from "@/base";
* @class BI.TextEditor
* @extends BI.Single @shortcut()
*/ export class TextEditor extends Widget {
BI.TextEditor = BI.inherit(BI.Widget, { static xtype = "bi.text_editor"
_defaultConfig: function (config) {
var conf = BI.TextEditor.superclass._defaultConfig.apply(this, arguments); static EVENT_CHANGE = "EVENT_CHANGE"
return BI.extend(conf, { static EVENT_FOCUS = "EVENT_FOCUS"
extraCls: "bi-text-editor bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border"), 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_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(config) {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: `bi-text-editor bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border"}`,
hgap: 4, hgap: 4,
vgap: 2, vgap: 2,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
validationChecker: BI.emptyFn, validationChecker: emptyFn,
quitChecker: BI.emptyFn, quitChecker: emptyFn,
allowBlank: false, allowBlank: false,
watermark: "", watermark: "",
errorText: "", errorText: "",
height: 24 height: 24,
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const o = this.options;
var border = o.simple ? 1 : 2; const border = o.simple ? 1 : 2;
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.editor", type: Editor.xtype,
element: this, element: this,
width: BI.toPix(o.width, border), width: toPix(o.width, border),
height: BI.toPix(o.height, border), height: toPix(o.height, border),
simple: o.simple, simple: o.simple,
hgap: o.hgap, hgap: o.hgap,
vgap: o.vgap, vgap: o.vgap,
@ -50,121 +71,100 @@ BI.TextEditor = BI.inherit(BI.Widget, {
autocomplete: o.autocomplete, autocomplete: o.autocomplete,
autoTrim: o.autoTrim, autoTrim: o.autoTrim,
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
}); });
this.editor.on(BI.Editor.EVENT_FOCUS, function () { this.editor.on(Editor.EVENT_FOCUS, () => {
self.fireEvent(BI.TextEditor.EVENT_FOCUS); this.fireEvent(TextEditor.EVENT_FOCUS);
}); });
this.editor.on(BI.Editor.EVENT_BLUR, function () { this.editor.on(Editor.EVENT_BLUR, () => {
self.fireEvent(BI.TextEditor.EVENT_BLUR); this.fireEvent(TextEditor.EVENT_BLUR);
}); });
this.editor.on(BI.Editor.EVENT_CLICK, function () { this.editor.on(Editor.EVENT_CLICK, () => {
self.fireEvent(BI.TextEditor.EVENT_CLICK); this.fireEvent(TextEditor.EVENT_CLICK);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE, function () { this.editor.on(Editor.EVENT_CHANGE, () => {
self.fireEvent(BI.TextEditor.EVENT_CHANGE); this.fireEvent(TextEditor.EVENT_CHANGE);
}); });
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { this.editor.on(Editor.EVENT_KEY_DOWN, v => {
self.fireEvent(BI.TextEditor.EVENT_KEY_DOWN); this.fireEvent(TextEditor.EVENT_KEY_DOWN);
}); });
this.editor.on(BI.Editor.EVENT_SPACE, function (v) { this.editor.on(Editor.EVENT_SPACE, v => {
self.fireEvent(BI.TextEditor.EVENT_SPACE); this.fireEvent(TextEditor.EVENT_SPACE);
}); });
this.editor.on(BI.Editor.EVENT_BACKSPACE, function (v) { this.editor.on(Editor.EVENT_BACKSPACE, v => {
self.fireEvent(BI.TextEditor.EVENT_BACKSPACE); this.fireEvent(TextEditor.EVENT_BACKSPACE);
}); });
this.editor.on(BI.Editor.EVENT_VALID, function () { this.editor.on(Editor.EVENT_VALID, () => {
self.element.removeClass("error"); this.element.removeClass("error");
self.fireEvent(BI.TextEditor.EVENT_VALID); this.fireEvent(TextEditor.EVENT_VALID);
}); });
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { this.editor.on(Editor.EVENT_CONFIRM, () => {
self.fireEvent(BI.TextEditor.EVENT_CONFIRM); this.fireEvent(TextEditor.EVENT_CONFIRM);
}); });
this.editor.on(BI.Editor.EVENT_CHANGE_CONFIRM, function () { this.editor.on(Editor.EVENT_CHANGE_CONFIRM, () => {
self.fireEvent(BI.TextEditor.EVENT_CHANGE_CONFIRM); this.fireEvent(TextEditor.EVENT_CHANGE_CONFIRM);
}); });
this.editor.on(BI.Editor.EVENT_REMOVE, function (v) { this.editor.on(Editor.EVENT_REMOVE, v => {
self.fireEvent(BI.TextEditor.EVENT_REMOVE); this.fireEvent(TextEditor.EVENT_REMOVE);
}); });
this.editor.on(BI.Editor.EVENT_START, function () { this.editor.on(Editor.EVENT_START, () => {
self.fireEvent(BI.TextEditor.EVENT_START); this.fireEvent(TextEditor.EVENT_START);
}); });
this.editor.on(BI.Editor.EVENT_PAUSE, function () { this.editor.on(Editor.EVENT_PAUSE, () => {
self.fireEvent(BI.TextEditor.EVENT_PAUSE); this.fireEvent(TextEditor.EVENT_PAUSE);
}); });
this.editor.on(BI.Editor.EVENT_STOP, function () { this.editor.on(Editor.EVENT_STOP, () => {
self.fireEvent(BI.TextEditor.EVENT_STOP); this.fireEvent(TextEditor.EVENT_STOP);
}); });
this.editor.on(BI.Editor.EVENT_ERROR, function () { this.editor.on(Editor.EVENT_ERROR, (...args) => {
self.element.addClass("error"); this.element.addClass("error");
self.fireEvent(BI.TextEditor.EVENT_ERROR, arguments); this.fireEvent(TextEditor.EVENT_ERROR, ...args);
}); });
this.editor.on(BI.Editor.EVENT_ENTER, function () { this.editor.on(Editor.EVENT_ENTER, () => {
self.fireEvent(BI.TextEditor.EVENT_ENTER); this.fireEvent(TextEditor.EVENT_ENTER);
}); });
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { this.editor.on(Editor.EVENT_RESTRICT, () => {
self.fireEvent(BI.TextEditor.EVENT_RESTRICT); this.fireEvent(TextEditor.EVENT_RESTRICT);
}); });
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(Editor.EVENT_EMPTY, () => {
self.fireEvent(BI.TextEditor.EVENT_EMPTY); this.fireEvent(TextEditor.EVENT_EMPTY);
}); });
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.options.watermark = v; this.options.watermark = v;
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
}, }
setErrorText: function (text) { setErrorText(text) {
this.editor.setErrorText(text); this.editor.setErrorText(text);
}, }
getErrorText: function () { getErrorText() {
return this.editor.getErrorText(); return this.editor.getErrorText();
}, }
isValid: function () { isValid() {
return this.editor.isValid(); return this.editor.isValid();
}, }
setValue: function (v) { setValue(v) {
this.editor.setValue(v); this.editor.setValue(v);
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
} }
}); }
BI.TextEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.TextEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.TextEditor.EVENT_BLUR = "EVENT_BLUR";
BI.TextEditor.EVENT_CLICK = "EVENT_CLICK";
BI.TextEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.TextEditor.EVENT_SPACE = "EVENT_SPACE";
BI.TextEditor.EVENT_BACKSPACE = "EVENT_BACKSPACE";
BI.TextEditor.EVENT_START = "EVENT_START";
BI.TextEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.TextEditor.EVENT_STOP = "EVENT_STOP";
BI.TextEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.TextEditor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.TextEditor.EVENT_VALID = "EVENT_VALID";
BI.TextEditor.EVENT_ERROR = "EVENT_ERROR";
BI.TextEditor.EVENT_ENTER = "EVENT_ENTER";
BI.TextEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.TextEditor.EVENT_REMOVE = "EVENT_REMOVE";
BI.TextEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.text_editor", BI.TextEditor);

34
src/widget/editor/editor.text.small.js

@ -1,20 +1,20 @@
/** import { shortcut, extend } from "@/core";
* 小号搜索框 import { TextEditor } from "./editor.text";
* Created by GUY on 2015/9/29.
* @class BI.SmallTextEditor @shortcut()
* @extends BI.SearchEditor export class SmallTextEditor extends TextEditor {
*/ static xtype = "bi.small_text_editor"
BI.SmallTextEditor = BI.inherit(BI.TextEditor, {
_defaultConfig: function () { _defaultConfig() {
var conf = BI.SmallTextEditor.superclass._defaultConfig.apply(this, arguments); const conf = super._defaultConfig(...arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-small-text-editor", return extend(conf, {
height: 20 baseCls: `${conf.baseCls || ""} bi-small-text-editor`,
height: 20,
}); });
}, }
_init: function () { _init() {
BI.SmallTextEditor.superclass._init.apply(this, arguments); super._init(...arguments);
}
} }
});
BI.shortcut("bi.small_text_editor", BI.SmallTextEditor);

4
src/widget/editor/index.js

@ -0,0 +1,4 @@
export { SearchEditor } from "./editor.search";
export { SmallSearchEditor } from "./editor.search.small";
export { TextEditor } from "./editor.text";
export { SmallTextEditor } from "./editor.text.small";

18
src/widget/index.js

@ -6,11 +6,14 @@ import * as datetime from "./datetime";
import * as datetimepane from "./datetimepane"; import * as datetimepane from "./datetimepane";
import * as dynamicdatetime from "./dynamicdatetime"; import * as dynamicdatetime from "./dynamicdatetime";
import * as time from "./time"; import * as time from "./time";
import * as editor from "./editor";
import { SelectTreeCombo } from "./selecttree/selecttree.combo"; import { SelectTreeCombo } from "./selecttree/selecttree.combo";
import { SingleTreeCombo } from "./singletree/singletree.combo"; import { SingleTreeCombo } from "./singletree/singletree.combo";
import { MultiTreeCombo } from "./multitree/multi.tree.combo"; import { MultiTreeCombo } from "./multitree/multi.tree.combo";
import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo"; import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo";
import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo";
import { NumberEditor } from "./numbereditor/number.editor";
import { NumberInterval } from "./numberinterval/numberinterval";
import * as multiselect from "./multiselect"; import * as multiselect from "./multiselect";
import * as multiselectlist from "./multiselectlist"; import * as multiselectlist from "./multiselectlist";
@ -23,11 +26,14 @@ Object.assign(BI, {
...datetimepane, ...datetimepane,
...dynamicdatetime, ...dynamicdatetime,
...time, ...time,
...editor,
SelectTreeCombo, SelectTreeCombo,
SingleTreeCombo, SingleTreeCombo,
MultiTreeCombo, MultiTreeCombo,
MultiTreeInsertCombo, MultiTreeInsertCombo,
MultiTreeListCombo, MultiTreeListCombo,
NumberEditor,
NumberInterval,
...multiselect, ...multiselect,
...multiselectlist, ...multiselectlist,
}); });
@ -38,7 +44,8 @@ export * from "./datepane";
export * from "./datetime"; export * from "./datetime";
export * from "./datetimepane"; export * from "./datetimepane";
export * from "./dynamicdatetime"; export * from "./dynamicdatetime";
export * from "./time"; export * from "./time
export * from "./editor";
export { SelectTreeCombo } from "./selecttree/selecttree.combo"; export { SelectTreeCombo } from "./selecttree/selecttree.combo";
export { SingleTreeCombo } from "./singletree/singletree.combo"; export { SingleTreeCombo } from "./singletree/singletree.combo";
export { MultiTreeCombo } from "./multitree/multi.tree.combo"; export { MultiTreeCombo } from "./multitree/multi.tree.combo";
@ -48,5 +55,12 @@ export * from "./multiselect";
export * from "./multiselectlist"; export * from "./multiselectlist";
export { export {
Collapse Collapse,
NumberEditor,
NumberInterval,
SelectTreeCombo,
SingleTreeCombo,
MultiTreeCombo,
MultiTreeInsertCombo,
MultiTreeListCombo
}; };

216
src/widget/numbereditor/number.editor.js

@ -1,128 +1,133 @@
/** import { shortcut, Widget, extend, emptyFn, createWidget, toPix, parseFloat, HTapeLayout, GridLayout, isNumeric, clamp, MIN, MAX, KeyCode, add } from "@/core";
* Created by windy on 2017/3/13. import { SignEditor } from "@/case";
* 数值微调器 import { TextEditor } from "../editor";
*/ import { IconButton } from "@/base";
BI.NumberEditor = BI.inherit(BI.Widget, {
_defaultConfig: function (conf) { @shortcut()
return BI.extend(BI.NumberEditor.superclass._defaultConfig.apply(this, arguments), { export class NumberEditor extends Widget {
baseCls: "bi-number-editor bi-focus-shadow " + (conf.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), static xtype = "bi.number_editor"
validationChecker: BI.emptyFn,
valueFormatter: function (v) { static EVENT_CONFIRM = "EVENT_CONFIRM"
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig(conf) {
return extend(super._defaultConfig(...arguments), {
baseCls: `bi-number-editor bi-focus-shadow ${conf.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
validationChecker: emptyFn,
valueFormatter (v) {
return v; return v;
}, },
valueParser: function (v) { valueParser (v) {
return v; return v;
}, },
value: 0, value: 0,
allowBlank: false, allowBlank: false,
errorText: "", errorText: "",
step: 1, step: 1,
min: BI.MIN, min: MIN,
max: BI.MAX, max: MAX,
watermark: "", watermark: "",
}); });
}, }
_init: function () { _init() {
BI.NumberEditor.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.editor = BI.createWidget({ this.editor = createWidget({
type: "bi.sign_editor", type: SignEditor.xtype,
height: BI.toPix(o.height, 2), height: toPix(o.height, 2),
simple: o.simple, simple: o.simple,
allowBlank: o.allowBlank, allowBlank: o.allowBlank,
watermark: o.watermark, watermark: o.watermark,
value: o.valueFormatter(o.value), value: o.valueFormatter(o.value),
validationChecker: function (v) { validationChecker: v => {
// 不设置validationChecker就自动检测 // 不设置validationChecker就自动检测
var parsedValue = o.valueParser(v); const parsedValue = o.valueParser(v);
if (o.validationChecker === BI.emptyFn && !self._checkValueInRange(parsedValue)) { if (o.validationChecker === emptyFn && !this._checkValueInRange(parsedValue)) {
return false; return false;
} }
return o.validationChecker(parsedValue); return o.validationChecker(parsedValue);
}, },
errorText: o.errorText, errorText: o.errorText,
listeners: [ listeners: [{
{ eventName: SignEditor.EVENT_QUICK_DOWN,
eventName: BI.SignEditor.EVENT_QUICK_DOWN,
action: e => { action: e => {
if ([BI.KeyCode.UP, BI.KeyCode.DOWN].includes(e.keyCode)) { if ([KeyCode.UP, KeyCode.DOWN].includes(e.keyCode)) {
e.preventDefault(); e.preventDefault();
} }
}, },
}, },
{ {
eventName: BI.SignEditor.EVENT_KEY_DOWN, eventName: SignEditor.EVENT_KEY_DOWN,
action: (keycode) => { action: keycode => {
if (keycode === BI.KeyCode.UP) { if (keycode === KeyCode.UP) {
this._finetuning(o.step); this._finetuning(o.step);
return; return;
} }
if (keycode === BI.KeyCode.DOWN) { if (keycode === KeyCode.DOWN) {
this._finetuning(-o.step); this._finetuning(-o.step);
} }
}, },
} }
], ],
}); });
this.editor.on(BI.TextEditor.EVENT_CHANGE, function () { this.editor.on(TextEditor.EVENT_CHANGE, () => {
// 大多数时候valueFormatter往往需要配合valueParser一起使用 // 大多数时候valueFormatter往往需要配合valueParser一起使用
var value = this.getValue(); const value = this.editor.getValue();
var parsedValue = o.valueParser(value); const parsedValue = o.valueParser(value);
this.setValue(o.valueFormatter(parsedValue)); this.editor.setValue(o.valueFormatter(parsedValue));
self.fireEvent(BI.NumberEditor.EVENT_CHANGE); this.fireEvent(NumberEditor.EVENT_CHANGE);
}); });
this.editor.on(BI.TextEditor.EVENT_ERROR, function () { this.editor.on(TextEditor.EVENT_ERROR, () => {
o.value = BI.parseFloat(this.getLastValidValue()); o.value = parseFloat(this.editor.getLastValidValue());
self._checkAdjustDisabled(o.value); this._checkAdjustDisabled(o.value);
self.element.addClass("error"); this.element.addClass("error");
}); });
this.editor.on(BI.TextEditor.EVENT_VALID, function () { this.editor.on(TextEditor.EVENT_VALID, () => {
o.value = BI.parseFloat(this.getValue()); o.value = parseFloat(this.editor.getValue());
self._checkAdjustDisabled(o.value); this._checkAdjustDisabled(o.value);
self.element.removeClass("error"); this.element.removeClass("error");
}); });
this.editor.on(BI.TextEditor.EVENT_CONFIRM, function () { this.editor.on(TextEditor.EVENT_CONFIRM, () => {
self.fireEvent(BI.NumberEditor.EVENT_CONFIRM); this.fireEvent(NumberEditor.EVENT_CONFIRM);
}); });
this.topBtn = BI.createWidget({ this.topBtn = createWidget({
type: "bi.icon_button", type: IconButton.xtype,
forceNotSelected: true, forceNotSelected: true,
trigger: "lclick,", trigger: "lclick,",
debounce: false, debounce: false,
cls: (o.simple ? "solid-triangle-top-font " : "add-up-font bi-border-left ") + "top-button bi-list-item-active2 icon-size-12", cls: `${o.simple ? "solid-triangle-top-font " : "add-up-font bi-border-left "}top-button bi-list-item-active2 icon-size-12`,
}); });
this.topBtn.on(BI.IconButton.EVENT_CHANGE, function () { this.topBtn.on(IconButton.EVENT_CHANGE, () => {
self._finetuning(o.step); this._finetuning(o.step);
self.fireEvent(BI.NumberEditor.EVENT_CHANGE); this.fireEvent(NumberEditor.EVENT_CHANGE);
self.fireEvent(BI.NumberEditor.EVENT_CONFIRM); this.fireEvent(NumberEditor.EVENT_CONFIRM);
}); });
this.bottomBtn = BI.createWidget({ this.bottomBtn = createWidget({
type: "bi.icon_button", type: IconButton.xtype,
trigger: "lclick,", trigger: "lclick,",
forceNotSelected: true, forceNotSelected: true,
debounce: false, debounce: false,
cls: (o.simple ? "solid-triangle-bottom-font " : "minus-down-font bi-border-left ") + "bottom-button bi-list-item-active2 icon-size-12", cls: `${o.simple ? "solid-triangle-bottom-font " : "minus-down-font bi-border-left "}bottom-button bi-list-item-active2 icon-size-12`,
}); });
this.bottomBtn.on(BI.IconButton.EVENT_CHANGE, function () { this.bottomBtn.on(IconButton.EVENT_CHANGE, () => {
self._finetuning(-o.step); this._finetuning(-o.step);
self.fireEvent(BI.NumberEditor.EVENT_CHANGE); this.fireEvent(NumberEditor.EVENT_CHANGE);
self.fireEvent(BI.NumberEditor.EVENT_CONFIRM); this.fireEvent(NumberEditor.EVENT_CONFIRM);
}); });
BI.createWidget({ createWidget({
type: "bi.htape", type: HTapeLayout.xtype,
height: BI.toPix(o.height, 2), height: toPix(o.height, 2),
element: this, element: this,
items: [ items: [
this.editor, { this.editor, {
el: { el: {
type: "bi.grid", type: GridLayout.xtype,
columns: 1, columns: 1,
rows: 2, rows: 2,
items: [ items: [{
{
column: 0, column: 0,
row: 0, row: 0,
el: this.topBtn, el: this.topBtn,
@ -130,73 +135,70 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
column: 0, column: 0,
row: 1, row: 1,
el: this.bottomBtn, el: this.bottomBtn,
} }],
],
}, },
width: 23, width: 23,
} }
], ],
}); });
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
isEditing: function () { isEditing() {
return this.editor.isEditing(); return this.editor.isEditing();
}, }
_checkValueInRange: function (v) { _checkValueInRange(v) {
var o = this.options; const o = this.options;
return !!(BI.isNumeric(v) && BI.parseFloat(v) >= o.min && BI.parseFloat(v) <= o.max); return !!(isNumeric(v) && parseFloat(v) >= o.min && parseFloat(v) <= o.max);
}, }
_checkAdjustDisabled: function (v) { _checkAdjustDisabled(v) {
if (this.options.validationChecker === BI.emptyFn) { if (this.options.validationChecker === emptyFn) {
this.bottomBtn.setEnable(BI.parseFloat(v) > this.options.min); this.bottomBtn.setEnable(parseFloat(v) > this.options.min);
this.topBtn.setEnable(BI.parseFloat(v) < this.options.max); this.topBtn.setEnable(parseFloat(v) < this.options.max);
}
} }
},
// 微调 _finetuning(addValue) {
_finetuning: function (add) { const {
const { max, min } = this.options; max,
let v = BI.parseFloat(this.getValue()); min,
v = BI.add(v, add); } = this.options;
v = BI.clamp(v, min, max); let v = parseFloat(this.getValue());
v = add(v, addValue);
v = clamp(v, min, max);
this.setValue(v); this.setValue(v);
}, }
setUpEnable: function (v) { setUpEnable(v) {
this.topBtn.setEnable(!!v); this.topBtn.setEnable(!!v);
}, }
setDownEnable: function (v) { setDownEnable(v) {
this.bottomBtn.setEnable(!!v); this.bottomBtn.setEnable(!!v);
}, }
getLastValidValue: function () { getLastValidValue() {
return this.editor.getLastValidValue(); return this.editor.getLastValidValue();
}, }
getLastChangedValue: function () { getLastChangedValue() {
return this.editor.getLastChangedValue(); return this.editor.getLastChangedValue();
}, }
getValue: function () { getValue() {
return this.options.value; return this.options.value;
}, }
setValue: function (v) { setValue(v) {
var o = this.options; const o = this.options;
o.value = v; o.value = v;
this.editor.setValue(o.valueFormatter(v)); this.editor.setValue(o.valueFormatter(v));
this._checkAdjustDisabled(o.value); this._checkAdjustDisabled(o.value);
}, }
}
});
BI.NumberEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.NumberEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.number_editor", BI.NumberEditor);

466
src/widget/numberinterval/numberinterval.js

@ -1,11 +1,13 @@
// 小于号的值为:0,小于等于号的值为:1 import { shortcut, extend, i18nText, createWidget, toPix, isNumeric, AbsoluteLayout, isEmptyString, isNotNull, isNull, isIE, getIEVersion } from "@/core";
// closeMIn:最小值的符号,closeMax:最大值的符号 import { Single, Label, Bubbles } from "@/base";
/** import { IconCombo } from "@/case";
* Created by roy on 15/9/17. import { NumberIntervalSingleEidtor } from "./singleeditor/single.editor";
*
*/ @shortcut()
BI.NumberInterval = BI.inherit(BI.Single, { export class NumberInterval extends Single {
constants: { static xtype = "bi.number_interval"
constants = {
typeError: "typeBubble", typeError: "typeBubble",
numberError: "numberBubble", numberError: "numberBubble",
signalError: "signalBubble", signalError: "signalBubble",
@ -18,160 +20,174 @@ BI.NumberInterval = BI.inherit(BI.Single, {
less: 0, less: 0,
less_equal: 1, less_equal: 1,
numTip: "", numTip: "",
adjustYOffset: 2 adjustYOffset: 2,
}, };
_defaultConfig: function () {
var conf = BI.NumberInterval.superclass._defaultConfig.apply(this, arguments); static EVENT_CHANGE = "EVENT_CHANGE"
return BI.extend(conf, { static EVENT_CONFIRM = "EVENT_CONFIRM"
extraCls: "bi-number-interval" + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""), static EVENT_VALID = "EVENT_VALID"
static EVENT_ERROR = "EVENT_ERROR"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: `bi-number-interval${(isIE() && getIEVersion() < 10) ? " hack" : ""}`,
height: 24, height: 24,
validation: "valid", validation: "valid",
closeMin: true, closeMin: true,
allowBlank: true, allowBlank: true,
watermark: BI.i18nText("BI-Basic_Unrestricted") watermark: i18nText("BI-Basic_Unrestricted"),
}); });
}, }
_init: function () {
var self = this, c = this.constants, o = this.options; _init() {
BI.NumberInterval.superclass._init.apply(this, arguments); const self = this,
this.smallEditor = BI.createWidget({ c = this.constants,
o = this.options;
super._init(...arguments);
this.smallEditor = createWidget({
type: "bi.number_interval_single_editor", type: "bi.number_interval_single_editor",
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
watermark: o.watermark, watermark: o.watermark,
allowBlank: o.allowBlank, allowBlank: o.allowBlank,
value: o.min, value: o.min,
level: "warning", level: "warning",
tipType: "success", tipType: "success",
title: function () { title () {
return self.smallEditor && self.smallEditor.getValue(); return self.smallEditor && self.smallEditor.getValue();
}, },
quitChecker: function () { quitChecker () {
return false; return false;
}, },
validationChecker: function (v) { validationChecker (v) {
if (!BI.isNumeric(v)) { if (!isNumeric(v)) {
self.smallEditorBubbleType = c.typeError; self.smallEditorBubbleType = c.typeError;
return false; return false;
} }
return true; return true;
}, },
cls: "number-interval-small-editor bi-focus-shadow " + (o.simple ? "bi-border-bottom" : "bi-border bi-border-corner-left-radius") cls: `number-interval-small-editor bi-focus-shadow ${o.simple ? "bi-border-bottom" : "bi-border bi-border-corner-left-radius"}`,
}); });
this.smallTip = BI.createWidget({ this.smallTip = createWidget({
type: "bi.label", type: Label.xtype,
text: o.numTip, text: o.numTip,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
invisible: true invisible: true,
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this.smallEditor, element: this.smallEditor,
items: [{ items: [{
el: this.smallTip, el: this.smallTip,
top: 0, top: 0,
right: 5 right: 5,
}] }],
}); });
this.bigEditor = BI.createWidget({ this.bigEditor = createWidget({
type: "bi.number_interval_single_editor", type: "bi.number_interval_single_editor",
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
watermark: o.watermark, watermark: o.watermark,
allowBlank: o.allowBlank, allowBlank: o.allowBlank,
value: o.max, value: o.max,
title: function () { title () {
return self.bigEditor && self.bigEditor.getValue(); return self.bigEditor && self.bigEditor.getValue();
}, },
quitChecker: function () { quitChecker () {
return false; return false;
}, },
validationChecker: function (v) { validationChecker (v) {
if (!BI.isNumeric(v)) { if (!isNumeric(v)) {
self.bigEditorBubbleType = c.typeError; self.bigEditorBubbleType = c.typeError;
return false; return false;
} }
return true; return true;
}, },
cls: "number-interval-big-editor bi-focus-shadow" + (o.simple ? " bi-border-bottom" : " bi-border bi-border-corner-right-radius") cls: `number-interval-big-editor bi-focus-shadow${o.simple ? " bi-border-bottom" : " bi-border bi-border-corner-right-radius"}`,
}); });
this.bigTip = BI.createWidget({ this.bigTip = createWidget({
type: "bi.label", type: Label.xtype,
text: o.numTip, text: o.numTip,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
invisible: true invisible: true,
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this.bigEditor, element: this.bigEditor,
items: [{ items: [{
el: this.bigTip, el: this.bigTip,
top: 0, top: 0,
right: 5 right: 5,
}] }],
}); });
this.smallCombo = BI.createWidget({ this.smallCombo = createWidget({
type: "bi.icon_combo", type: IconCombo.xtype,
cls: "number-interval-small-combo" + (o.simple ? "" : " bi-border-top bi-border-bottom bi-border-right bi-border-corner-right-radius"), cls: `number-interval-small-combo${o.simple ? "" : " bi-border-top bi-border-bottom bi-border-right bi-border-corner-right-radius"}`,
height: BI.toPix(o.height, o.simple ? 0 : 2), height: toPix(o.height, o.simple ? 0 : 2),
width: BI.toPix(c.width, c.border), width: toPix(c.width, c.border),
items: [{ items: [{
text: "(" + BI.i18nText("BI-Less_Than") + ")", text: `(${i18nText("BI-Less_Than")})`,
iconCls: "less-font", iconCls: "less-font",
value: 0 value: 0,
}, { }, {
text: "(" + BI.i18nText("BI-Less_And_Equal") + ")", text: `(${i18nText("BI-Less_And_Equal")})`,
value: 1, value: 1,
iconCls: "less-equal-font" iconCls: "less-equal-font",
}] }],
}); });
if (o.closeMin === true) { if (o.closeMin === true) {
this.smallCombo.setValue(1); this.smallCombo.setValue(1);
} else { } else {
this.smallCombo.setValue(0); this.smallCombo.setValue(0);
} }
this.bigCombo = BI.createWidget({ this.bigCombo = createWidget({
type: "bi.icon_combo", type: IconCombo.xtype,
cls: "number-interval-big-combo" + (o.simple ? "" : " bi-border-top bi-border-bottom bi-border-left bi-border-corner-left-radius"), cls: `number-interval-big-combo${o.simple ? "" : " bi-border-top bi-border-bottom bi-border-left bi-border-corner-left-radius"}`,
height: BI.toPix(o.height, o.simple ? 0 : 2), height: toPix(o.height, o.simple ? 0 : 2),
width: BI.toPix(c.width, c.border), width: toPix(c.width, c.border),
items: [{ items: [{
text: "(" + BI.i18nText("BI-Less_Than") + ")", text: `(${i18nText("BI-Less_Than")})`,
iconCls: "less-font", iconCls: "less-font",
value: 0 value: 0,
}, { }, {
text: "(" + BI.i18nText("BI-Less_And_Equal") + ")", text: `(${i18nText("BI-Less_And_Equal")})`,
value: 1, value: 1,
iconCls: "less-equal-font" iconCls: "less-equal-font",
}] }],
}); });
if (o.closeMax === true) { if (o.closeMax === true) {
this.bigCombo.setValue(1); this.bigCombo.setValue(1);
} else { } else {
this.bigCombo.setValue(0); this.bigCombo.setValue(0);
} }
this.label = BI.createWidget({ this.label = createWidget({
type: "bi.label", type: Label.xtype,
text: BI.i18nText("BI-Basic_Value"), text: i18nText("BI-Basic_Value"),
textHeight: o.height, textHeight: o.height,
// width: BI.toPix(o.width, o.simple ? 0 : c.border * 2), // width: toPix(o.width, o.simple ? 0 : c.border * 2),
hgap: 5, hgap: 5,
height: o.height, height: o.height,
level: "warning", level: "warning",
tipType: "warning" tipType: "warning",
}); });
this.left = BI.createWidget({ this.left = createWidget({
type: "bi.horizontal_fill", type: "bi.horizontal_fill",
columnSize: ["fill", ""], columnSize: ["fill", ""],
items: [{ items: [{
el: self.smallEditor el: self.smallEditor,
}, { }, {
el: self.smallCombo, el: self.smallCombo,
}] }],
}); });
this.right = BI.createWidget({ this.right = createWidget({
type: "bi.horizontal_fill", type: "bi.horizontal_fill",
columnSize: ["", "fill"], columnSize: ["", "fill"],
items: [{ items: [{
@ -180,38 +196,38 @@ BI.NumberInterval = BI.inherit(BI.Single, {
el: self.bigEditor, el: self.bigEditor,
// BI-23883 间距考虑边框 // BI-23883 间距考虑边框
// lgap: 1 // lgap: 1
}] }],
}); });
BI.createWidget({ createWidget({
element: self, element: self,
type: "bi.horizontal_fill", type: "bi.horizontal_fill",
columnSize: ["fill", "", "fill"], columnSize: ["fill", "", "fill"],
items: [{ items: [{
el: self.left el: self.left,
}, { }, {
el: self.label el: self.label,
}, { }, {
el: self.right el: self.right,
}] }],
}); });
// BI.createWidget({ // createWidget({
// element: self, // element: self,
// type: "bi.horizontal_auto", // type: HorizontalAutoLayout.xtype,
// items: [ // items: [
// self.label // self.label
// ] // ]
// }); // });
// BI.createWidget({ // createWidget({
// element: self, // element: self,
// type: "bi.center", // type: CenterLayout.xtype,
// hgap: 15, // hgap: 15,
// height: o.height, // height: o.height,
// items: [ // items: [
// { // {
// type: "bi.absolute", // type: AbsoluteLayout.xtype,
// items: [{ // items: [{
// el: self.left, // el: self.left,
// left: -15, // left: -15,
@ -220,7 +236,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
// bottom: 0 // bottom: 0
// }] // }]
// }, { // }, {
// type: "bi.absolute", // type: AbsoluteLayout.xtype,
// items: [{ // items: [{
// el: self.right, // el: self.right,
// left: 0, // left: 0,
@ -246,264 +262,274 @@ BI.NumberInterval = BI.inherit(BI.Single, {
self._setEditorValueChangedEvent(self.smallEditor); self._setEditorValueChangedEvent(self.smallEditor);
self._checkValidation(); self._checkValidation();
}, }
_checkValidation: function () { _checkValidation() {
var self = this, c = this.constants, o = this.options; const self = this,
c = this.constants,
o = this.options;
self._setTitle(""); self._setTitle("");
BI.Bubbles.hide(c.typeError); Bubbles.hide(c.typeError);
BI.Bubbles.hide(c.numberError); Bubbles.hide(c.numberError);
BI.Bubbles.hide(c.signalError); Bubbles.hide(c.signalError);
if (!self.smallEditor.isValid() || !self.bigEditor.isValid()) { if (!self.smallEditor.isValid() || !self.bigEditor.isValid()) {
self.element.removeClass("number-error"); self.element.removeClass("number-error");
o.validation = "invalid"; o.validation = "invalid";
return c.typeError; return c.typeError;
} }
if (BI.isEmptyString(self.smallEditor.getValue()) || BI.isEmptyString(self.bigEditor.getValue())) { if (isEmptyString(self.smallEditor.getValue()) || isEmptyString(self.bigEditor.getValue())) {
self.element.removeClass("number-error"); self.element.removeClass("number-error");
o.validation = "valid"; o.validation = "valid";
return ""; return "";
} }
var smallValue = parseFloat(self.smallEditor.getValue()), bigValue = parseFloat(self.bigEditor.getValue()), const smallValue = parseFloat(self.smallEditor.getValue()),
bigComboValue = self.bigCombo.getValue(), smallComboValue = self.smallCombo.getValue(); bigValue = parseFloat(self.bigEditor.getValue()),
bigComboValue = self.bigCombo.getValue(),
smallComboValue = self.smallCombo.getValue();
if (bigComboValue[0] === c.less_equal && smallComboValue[0] === c.less_equal) { if (bigComboValue[0] === c.less_equal && smallComboValue[0] === c.less_equal) {
if (smallValue > bigValue) { if (smallValue > bigValue) {
self.element.addClass("number-error"); self.element.addClass("number-error");
o.validation = "invalid"; o.validation = "invalid";
return c.numberError; return c.numberError;
} }
self.element.removeClass("number-error"); self.element.removeClass("number-error");
o.validation = "valid"; o.validation = "valid";
return "";
return "";
} }
if (smallValue > bigValue) { if (smallValue > bigValue) {
self.element.addClass("number-error"); self.element.addClass("number-error");
o.validation = "invalid"; o.validation = "invalid";
return c.numberError; return c.numberError;
} else if (smallValue === bigValue) { } else if (smallValue === bigValue) {
self.element.addClass("number-error"); self.element.addClass("number-error");
o.validation = "invalid"; o.validation = "invalid";
return c.signalError; return c.signalError;
} }
self.element.removeClass("number-error"); self.element.removeClass("number-error");
o.validation = "valid"; o.validation = "valid";
return "";
return "";
}
_setTitle(v) {
},
_setTitle: function (v) {
this.label.setTitle(v); this.label.setTitle(v);
}, }
_setFocusEvent: function (w) { _setFocusEvent(w) {
var self = this, c = this.constants; const self = this,
w.on(BI.NumberIntervalSingleEidtor.EVENT_FOCUS, function () { c = this.constants;
w.on(NumberIntervalSingleEidtor.EVENT_FOCUS, () => {
self._setTitle(""); self._setTitle("");
switch (self._checkValidation()) { switch (self._checkValidation()) {
case c.typeError: case c.typeError:
BI.Bubbles.show(c.typeError, BI.i18nText("BI-Numerical_Interval_Input_Data"), self, { Bubbles.show(c.typeError, i18nText("BI-Numerical_Interval_Input_Data"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
break; break;
case c.numberError: case c.numberError:
BI.Bubbles.show(c.numberError, BI.i18nText("BI-Numerical_Interval_Number_Value"), self, { Bubbles.show(c.numberError, i18nText("BI-Numerical_Interval_Number_Value"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
break; break;
case c.signalError: case c.signalError:
BI.Bubbles.show(c.signalError, BI.i18nText("BI-Numerical_Interval_Signal_Value"), self, { Bubbles.show(c.signalError, i18nText("BI-Numerical_Interval_Signal_Value"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
break; break;
default: default:
return; return;
} }
}); });
}, }
_setBlurEvent: function (w) {
var c = this.constants, self = this; _setBlurEvent(w) {
w.on(BI.NumberIntervalSingleEidtor.EVENT_BLUR, function () { const c = this.constants,
BI.Bubbles.hide(c.typeError); self = this;
BI.Bubbles.hide(c.numberError); w.on(NumberIntervalSingleEidtor.EVENT_BLUR, () => {
BI.Bubbles.hide(c.signalError); Bubbles.hide(c.typeError);
Bubbles.hide(c.numberError);
Bubbles.hide(c.signalError);
switch (self._checkValidation()) { switch (self._checkValidation()) {
case c.typeError: case c.typeError:
self._setTitle(BI.i18nText("BI-Numerical_Interval_Input_Data")); self._setTitle(i18nText("BI-Numerical_Interval_Input_Data"));
break; break;
case c.numberError: case c.numberError:
self._setTitle(BI.i18nText("BI-Numerical_Interval_Number_Value")); self._setTitle(i18nText("BI-Numerical_Interval_Number_Value"));
break; break;
case c.signalError: case c.signalError:
self._setTitle(BI.i18nText("BI-Numerical_Interval_Signal_Value")); self._setTitle(i18nText("BI-Numerical_Interval_Signal_Value"));
break; break;
default: default:
self._setTitle(""); self._setTitle("");
} }
}); });
}, }
_setErrorEvent: function (w) { _setErrorEvent(w) {
var c = this.constants, self = this; const c = this.constants,
w.on(BI.NumberIntervalSingleEidtor.EVENT_ERROR, function () { self = this;
w.on(NumberIntervalSingleEidtor.EVENT_ERROR, () => {
self._checkValidation(); self._checkValidation();
BI.Bubbles.show(c.typeError, BI.i18nText("BI-Numerical_Interval_Input_Data"), self, { Bubbles.show(c.typeError, i18nText("BI-Numerical_Interval_Input_Data"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
self.fireEvent(BI.NumberInterval.EVENT_ERROR); self.fireEvent(NumberInterval.EVENT_ERROR);
}); });
}, }
_setValidEvent: function (w) { _setValidEvent(w) {
var self = this, c = this.constants; const self = this,
w.on(BI.NumberIntervalSingleEidtor.EVENT_VALID, function () { c = this.constants;
w.on(NumberIntervalSingleEidtor.EVENT_VALID, () => {
switch (self._checkValidation()) { switch (self._checkValidation()) {
case c.numberError: case c.numberError:
BI.Bubbles.show(c.numberError, BI.i18nText("BI-Numerical_Interval_Number_Value"), self, { Bubbles.show(c.numberError, i18nText("BI-Numerical_Interval_Number_Value"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
self.fireEvent(BI.NumberInterval.EVENT_ERROR); self.fireEvent(NumberInterval.EVENT_ERROR);
break; break;
case c.signalError: case c.signalError:
BI.Bubbles.show(c.signalError, BI.i18nText("BI-Numerical_Interval_Signal_Value"), self, { Bubbles.show(c.signalError, i18nText("BI-Numerical_Interval_Signal_Value"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
self.fireEvent(BI.NumberInterval.EVENT_ERROR); self.fireEvent(NumberInterval.EVENT_ERROR);
break; break;
default: default:
self.fireEvent(BI.NumberInterval.EVENT_VALID); self.fireEvent(NumberInterval.EVENT_VALID);
} }
}); });
}, }
_setEditorValueChangedEvent: function (w) { _setEditorValueChangedEvent(w) {
var self = this, c = this.constants; const self = this,
w.on(BI.NumberIntervalSingleEidtor.EVENT_CHANGE, function () { c = this.constants;
w.on(NumberIntervalSingleEidtor.EVENT_CHANGE, () => {
switch (self._checkValidation()) { switch (self._checkValidation()) {
case c.typeError: case c.typeError:
BI.Bubbles.show(c.typeError, BI.i18nText("BI-Numerical_Interval_Input_Data"), self, { Bubbles.show(c.typeError, i18nText("BI-Numerical_Interval_Input_Data"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
break; break;
case c.numberError: case c.numberError:
BI.Bubbles.show(c.numberError, BI.i18nText("BI-Numerical_Interval_Number_Value"), self, { Bubbles.show(c.numberError, i18nText("BI-Numerical_Interval_Number_Value"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
break; break;
case c.signalError: case c.signalError:
BI.Bubbles.show(c.signalError, BI.i18nText("BI-Numerical_Interval_Signal_Value"), self, { Bubbles.show(c.signalError, i18nText("BI-Numerical_Interval_Signal_Value"), self, {
offsetStyle: "left", offsetStyle: "left",
adjustYOffset: c.adjustYOffset adjustYOffset: c.adjustYOffset,
}); });
break; break;
default: default:
break; break;
} }
self.fireEvent(BI.NumberInterval.EVENT_CHANGE); self.fireEvent(NumberInterval.EVENT_CHANGE);
}); });
w.on(BI.NumberIntervalSingleEidtor.EVENT_CONFIRM, function () { w.on(NumberIntervalSingleEidtor.EVENT_CONFIRM, () => {
self.fireEvent(BI.NumberInterval.EVENT_CONFIRM); self.fireEvent(NumberInterval.EVENT_CONFIRM);
}); });
}, }
_setComboValueChangedEvent: function (w) { _setComboValueChangedEvent(w) {
var self = this, c = this.constants; const self = this,
w.on(BI.IconCombo.EVENT_CHANGE, function () { c = this.constants;
w.on(IconCombo.EVENT_CHANGE, () => {
switch (self._checkValidation()) { switch (self._checkValidation()) {
case c.typeError: case c.typeError:
self._setTitle(BI.i18nText("BI-Numerical_Interval_Input_Data")); self._setTitle(i18nText("BI-Numerical_Interval_Input_Data"));
self.fireEvent(BI.NumberInterval.EVENT_ERROR); self.fireEvent(NumberInterval.EVENT_ERROR);
break; break;
case c.numberError: case c.numberError:
self._setTitle(BI.i18nText("BI-Numerical_Interval_Number_Value")); self._setTitle(i18nText("BI-Numerical_Interval_Number_Value"));
self.fireEvent(BI.NumberInterval.EVENT_ERROR); self.fireEvent(NumberInterval.EVENT_ERROR);
break; break;
case c.signalError: case c.signalError:
self._setTitle(BI.i18nText("BI-Numerical_Interval_Signal_Value")); self._setTitle(i18nText("BI-Numerical_Interval_Signal_Value"));
self.fireEvent(BI.NumberInterval.EVENT_ERROR); self.fireEvent(NumberInterval.EVENT_ERROR);
break; break;
default: default:
self.fireEvent(BI.NumberInterval.EVENT_CHANGE); self.fireEvent(NumberInterval.EVENT_CHANGE);
self.fireEvent(BI.NumberInterval.EVENT_CONFIRM); self.fireEvent(NumberInterval.EVENT_CONFIRM);
self.fireEvent(BI.NumberInterval.EVENT_VALID); self.fireEvent(NumberInterval.EVENT_VALID);
} }
}); });
}, }
isStateValid: function () { isStateValid() {
return this.options.validation === "valid"; return this.options.validation === "valid";
}, }
setMinEnable: function (b) { setMinEnable(b) {
this.smallEditor.setEnable(b); this.smallEditor.setEnable(b);
}, }
setCloseMinEnable: function (b) { setCloseMinEnable(b) {
this.smallCombo.setEnable(b); this.smallCombo.setEnable(b);
}, }
setMaxEnable: function (b) { setMaxEnable(b) {
this.bigEditor.setEnable(b); this.bigEditor.setEnable(b);
}, }
setCloseMaxEnable: function (b) { setCloseMaxEnable(b) {
this.bigCombo.setEnable(b); this.bigCombo.setEnable(b);
}, }
showNumTip: function () { showNumTip() {
this.smallTip.setVisible(true); this.smallTip.setVisible(true);
this.bigTip.setVisible(true); this.bigTip.setVisible(true);
}, }
hideNumTip: function () { hideNumTip() {
this.smallTip.setVisible(false); this.smallTip.setVisible(false);
this.bigTip.setVisible(false); this.bigTip.setVisible(false);
}, }
setNumTip: function (numTip) { setNumTip(numTip) {
this.smallTip.setText(numTip); this.smallTip.setText(numTip);
this.bigTip.setText(numTip); this.bigTip.setText(numTip);
}, }
getNumTip: function () { getNumTip() {
return this.smallTip.getText(); return this.smallTip.getText();
}, }
setValue: function (data) { setValue(data) {
data = data || {}; data = data || {};
var self = this, combo_value; const self = this;
if (BI.isNumeric(data.min) || BI.isEmptyString(data.min)) { let combo_value;
if (isNumeric(data.min) || isEmptyString(data.min)) {
self.smallEditor.setValue(data.min); self.smallEditor.setValue(data.min);
} }
if (!BI.isNotNull(data.min)) { if (!isNotNull(data.min)) {
self.smallEditor.setValue(""); self.smallEditor.setValue("");
} }
if (BI.isNumeric(data.max) || BI.isEmptyString(data.max)) { if (isNumeric(data.max) || isEmptyString(data.max)) {
self.bigEditor.setValue(data.max); self.bigEditor.setValue(data.max);
} }
if (!BI.isNotNull(data.max)) { if (!isNotNull(data.max)) {
self.bigEditor.setValue(""); self.bigEditor.setValue("");
} }
if (!BI.isNull(data.closeMin)) { if (!isNull(data.closeMin)) {
if (data.closeMin === true) { if (data.closeMin === true) {
combo_value = 1; combo_value = 1;
} else { } else {
@ -512,7 +538,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
self.smallCombo.setValue(combo_value); self.smallCombo.setValue(combo_value);
} }
if (!BI.isNull(data.closeMax)) { if (!isNull(data.closeMax)) {
if (data.closeMax === true) { if (data.closeMax === true) {
combo_value = 1; combo_value = 1;
} else { } else {
@ -522,11 +548,13 @@ BI.NumberInterval = BI.inherit(BI.Single, {
} }
this._checkValidation(); this._checkValidation();
}, }
getValue: function () { getValue() {
var self = this, value = {}, minComboValue = self.smallCombo.getValue(), maxComboValue = self.bigCombo.getValue(); const self = this,
value = {},
minComboValue = self.smallCombo.getValue(),
maxComboValue = self.bigCombo.getValue();
value.min = self.smallEditor.getValue(); value.min = self.smallEditor.getValue();
value.max = self.bigEditor.getValue(); value.max = self.bigEditor.getValue();
if (minComboValue[0] === 0) { if (minComboValue[0] === 0) {
@ -540,26 +568,22 @@ BI.NumberInterval = BI.inherit(BI.Single, {
} else { } else {
value.closeMax = true; value.closeMax = true;
} }
return value; return value;
}, }
focusMinEditor: function () { focusMinEditor() {
this.smallEditor.focus(); this.smallEditor.focus();
}, }
focusMaxEditor: function () { focusMaxEditor() {
this.bigEditor.focus(); this.bigEditor.focus();
}, }
destroyed: function () { destroyed() {
var c = this.constants; const c = this.constants;
BI.Bubbles.remove(c.typeError); Bubbles.remove(c.typeError);
BI.Bubbles.remove(c.numberError); Bubbles.remove(c.numberError);
BI.Bubbles.remove(c.signalError); Bubbles.remove(c.signalError);
}
} }
});
BI.NumberInterval.EVENT_CHANGE = "EVENT_CHANGE";
BI.NumberInterval.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.NumberInterval.EVENT_VALID = "EVENT_VALID";
BI.NumberInterval.EVENT_ERROR = "EVENT_ERROR";
BI.shortcut("bi.number_interval", BI.NumberInterval);

120
src/widget/numberinterval/singleeditor/single.editor.js

@ -1,19 +1,34 @@
BI.NumberIntervalSingleEidtor = BI.inherit(BI.Single, { import { shortcut, VerticalLayout } from "@/core";
props: { import { Single, Editor } from "@/base";
@shortcut()
export class NumberIntervalSingleEidtor extends Single {
static xtype = "bi.number_interval_single_editor"
static EVENT_FOCUS = "EVENT_FOCUS"
static EVENT_BLUR = "EVENT_BLUR"
static EVENT_ERROR = "EVENT_ERROR"
static EVENT_VALID = "EVENT_VALID"
static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"
static EVENT_CONFIRM = "EVENT_CONFIRM"
props = {
baseCls: "bi-number-interval-single-editor", baseCls: "bi-number-interval-single-editor",
tipType: "success", tipType: "success",
title: "" title: "",
}, };
render: function () { render() {
var self = this, o = this.options; const self = this,
o = this.options;
return { return {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [{
type: "bi.editor", type: Editor.xtype,
simple: o.simple, simple: o.simple,
ref: function (_ref) { ref (_ref) {
self.editor = _ref; self.editor = _ref;
}, },
height: o.height, height: o.height,
@ -23,67 +38,58 @@ BI.NumberIntervalSingleEidtor = BI.inherit(BI.Single, {
quitChecker: o.quitChecker, quitChecker: o.quitChecker,
validationChecker: o.validationChecker, validationChecker: o.validationChecker,
listeners: [{ listeners: [{
eventName: BI.Editor.EVENT_ERROR, eventName: Editor.EVENT_ERROR,
action: function () { action () {
self.fireEvent(BI.NumberIntervalSingleEidtor.EVENT_ERROR, arguments); self.fireEvent(NumberIntervalSingleEidtor.EVENT_ERROR, arguments);
} },
}, { }, {
eventName: BI.Editor.EVENT_FOCUS, eventName: Editor.EVENT_FOCUS,
action: function () { action () {
self.fireEvent(BI.NumberIntervalSingleEidtor.EVENT_FOCUS, arguments); self.fireEvent(NumberIntervalSingleEidtor.EVENT_FOCUS, arguments);
} },
}, { }, {
eventName: BI.Editor.EVENT_BLUR, eventName: Editor.EVENT_BLUR,
action: function () { action () {
self.fireEvent(BI.NumberIntervalSingleEidtor.EVENT_BLUR, arguments); self.fireEvent(NumberIntervalSingleEidtor.EVENT_BLUR, arguments);
} },
}, { }, {
eventName: BI.Editor.EVENT_VALID, eventName: Editor.EVENT_VALID,
action: function () { action () {
self.fireEvent(BI.NumberIntervalSingleEidtor.EVENT_VALID, arguments); self.fireEvent(NumberIntervalSingleEidtor.EVENT_VALID, arguments);
} },
}, { }, {
eventName: BI.Editor.EVENT_CHANGE, eventName: Editor.EVENT_CHANGE,
action: function () { action () {
self.fireEvent(BI.NumberIntervalSingleEidtor.EVENT_CHANGE, arguments); self.fireEvent(NumberIntervalSingleEidtor.EVENT_CHANGE, arguments);
} },
}, { }, {
eventName: BI.Editor.EVENT_CONFIRM, eventName: Editor.EVENT_CONFIRM,
action: function () { action () {
self.fireEvent(BI.NumberIntervalSingleEidtor.EVENT_CONFIRM, arguments); self.fireEvent(NumberIntervalSingleEidtor.EVENT_CONFIRM, arguments);
} },
}, { }, {
eventName: BI.Editor.EVENT_CHANGE_CONFIRM, eventName: Editor.EVENT_CHANGE_CONFIRM,
action: function () { action () {
self.fireEvent(BI.NumberIntervalSingleEidtor.EVENT_CHANGE_CONFIRM, arguments); self.fireEvent(NumberIntervalSingleEidtor.EVENT_CHANGE_CONFIRM, arguments);
}
}]
}]
};
}, },
}],
}],
};
}
isValid: function () { isValid() {
return this.editor.isValid(); return this.editor.isValid();
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
setValue: function (v) { setValue(v) {
return this.editor.setValue(v); return this.editor.setValue(v);
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
} }
}); }
BI.NumberIntervalSingleEidtor.EVENT_FOCUS = "EVENT_FOCUS";
BI.NumberIntervalSingleEidtor.EVENT_BLUR = "EVENT_BLUR";
BI.NumberIntervalSingleEidtor.EVENT_ERROR = "EVENT_ERROR";
BI.NumberIntervalSingleEidtor.EVENT_VALID = "EVENT_VALID";
BI.NumberIntervalSingleEidtor.EVENT_CHANGE = "EVENT_CHANGE";
BI.NumberIntervalSingleEidtor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.NumberIntervalSingleEidtor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.shortcut("bi.number_interval_single_editor", BI.NumberIntervalSingleEidtor);

255
src/widget/timeinterval/dateinterval.js

@ -1,27 +1,39 @@
/** import { shortcut, extend, createWidget, i18nText, print, parseDateTime, checkDateVoid, checkDateLegal, isNotNull } from "@/core";
* Created by Baron on 2015/10/19. import { Single, Label, Bubbles } from "@/base";
*/ import { DynamicDateCombo } from "../dynamicdate";
BI.DateInterval = BI.inherit(BI.Single, {
constants: { @shortcut()
export class DateInterval extends Single {
static xtype = "bi.date_interval"
constants = {
height: 24, height: 24,
width: 24, width: 24,
lgap: 15, lgap: 15,
offset: 0, offset: 0,
timeErrorCls: "time-error" timeErrorCls: "time-error",
}, };
_defaultConfig: function () {
var conf = BI.DateInterval.superclass._defaultConfig.apply(this, arguments); static EVENT_VALID = "EVENT_VALID"
return BI.extend(conf, { static EVENT_ERROR = "EVENT_ERROR"
static EVENT_CHANGE = "EVENT_CHANGE"
static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: "bi-date-interval", extraCls: "bi-date-interval",
minDate: "1900-01-01", minDate: "1900-01-01",
maxDate: "2099-12-31", maxDate: "2099-12-31",
height: 24, height: 24,
supportDynamic: true, supportDynamic: true,
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const o = this.options;
o.value = o.value || {}; o.value = o.value || {};
this.left = this._createCombo(o.value.start, o.watermark?.start); this.left = this._createCombo(o.value.start, o.watermark?.start);
this.right = this._createCombo(o.value.end, o.watermark?.end); this.right = this._createCombo(o.value.end, o.watermark?.end);
@ -30,164 +42,177 @@ BI.DateInterval = BI.inherit(BI.Single, {
type: "bi.horizontal_fill", type: "bi.horizontal_fill",
columnSize: ["fill", "", "fill"], columnSize: ["fill", "", "fill"],
items: [{ items: [{
el: self.left el: this.left,
}, { }, {
el: { el: {
type: "bi.label", type: Label.xtype,
height: o.height, height: o.height,
hgap: 5, hgap: 5,
text: "-", text: "-",
ref: function (_ref) { ref: _ref => {
self.label = _ref; this.label = _ref;
} },
} },
}, { }, {
el: self.right el: this.right,
}] }],
}; };
}, }
_createCombo: function (v, watermark) { _createCombo(v, watermark) {
var self = this, o = this.options; const o = this.options;
var combo = BI.createWidget({ const combo = createWidget({
type: "bi.dynamic_date_combo", type: DynamicDateCombo.xtype,
supportDynamic: o.supportDynamic, supportDynamic: o.supportDynamic,
minDate: o.minDate, minDate: o.minDate,
maxDate: o.maxDate, maxDate: o.maxDate,
simple: o.simple, simple: o.simple,
behaviors: o.behaviors, behaviors: o.behaviors,
watermark: watermark, watermark,
value: v, value: v,
height: o.height, height: o.height,
listeners: [{ listeners: [{
eventName: BI.DynamicDateCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, eventName: DynamicDateCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW,
action: function () { action: () => {
self.fireEvent(BI.DateInterval.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); this.fireEvent(DateInterval.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
} },
}] }],
}); });
combo.on(BI.DynamicDateCombo.EVENT_ERROR, function () { combo.on(DynamicDateCombo.EVENT_ERROR, () => {
self._clearTitle(); this._clearTitle();
BI.Bubbles.hide("error"); Bubbles.hide("error");
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
self.fireEvent(BI.DateInterval.EVENT_ERROR); this.fireEvent(DateInterval.EVENT_ERROR);
}); });
combo.on(BI.DynamicDateCombo.EVENT_VALID, function () { combo.on(DynamicDateCombo.EVENT_VALID, () => {
BI.Bubbles.hide("error"); Bubbles.hide("error");
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); const smallDate = this.left.getKey(),
if (self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { bigDate = this.right.getKey();
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); if (this._check(smallDate, bigDate) && this._compare(smallDate, bigDate)) {
self.element.addClass(self.constants.timeErrorCls); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
BI.Bubbles.show("error", BI.i18nText("BI-Time_Interval_Error_Text"), self, { this.element.addClass(this.constants.timeErrorCls);
offsetStyle: "center" Bubbles.show("error", i18nText("BI-Time_Interval_Error_Text"), this, {
offsetStyle: "center",
}); });
self.fireEvent(BI.DateInterval.EVENT_ERROR); this.fireEvent(DateInterval.EVENT_ERROR);
} else { } else {
self._clearTitle(); this._clearTitle();
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
} }
}); });
combo.on(BI.DynamicDateCombo.EVENT_FOCUS, function () { combo.on(DynamicDateCombo.EVENT_FOCUS, () => {
BI.Bubbles.hide("error"); Bubbles.hide("error");
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); const smallDate = this.left.getKey(),
if (self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { bigDate = this.right.getKey();
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); if (this._check(smallDate, bigDate) && this._compare(smallDate, bigDate)) {
self.element.addClass(self.constants.timeErrorCls); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
BI.Bubbles.show("error", BI.i18nText("BI-Time_Interval_Error_Text"), self, { this.element.addClass(this.constants.timeErrorCls);
offsetStyle: "center" Bubbles.show("error", i18nText("BI-Time_Interval_Error_Text"), this, {
offsetStyle: "center",
}); });
self.fireEvent(BI.DateInterval.EVENT_ERROR); this.fireEvent(DateInterval.EVENT_ERROR);
} else { } else {
self._clearTitle(); this._clearTitle();
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
} }
}); });
// combo.on(BI.DynamicDateCombo.EVENT_BEFORE_POPUPVIEW, function () { // combo.on(DynamicDateCombo.EVENT_BEFORE_POPUPVIEW, () => {
// self.left.hidePopupView(); // this.left.hidePopupView();
// self.right.hidePopupView(); // this.right.hidePopupView();
// }); // });
combo.on(BI.DynamicDateCombo.EVENT_CONFIRM, function () { combo.on(DynamicDateCombo.EVENT_CONFIRM, () => {
BI.Bubbles.hide("error"); Bubbles.hide("error");
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); const smallDate = this.left.getKey(),
if (self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { bigDate = this.right.getKey();
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); if (this._check(smallDate, bigDate) && this._compare(smallDate, bigDate)) {
self.element.addClass(self.constants.timeErrorCls); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
self.fireEvent(BI.DateInterval.EVENT_ERROR); this.element.addClass(this.constants.timeErrorCls);
this.fireEvent(DateInterval.EVENT_ERROR);
} else { } else {
self._clearTitle(); this._clearTitle();
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
self.fireEvent(BI.DateInterval.EVENT_CHANGE); this.fireEvent(DateInterval.EVENT_CHANGE);
} }
}); });
return combo; return combo;
}, }
_dateCheck: function (date) {
return BI.print(BI.parseDateTime(date, "%Y-%x-%d"), "%Y-%x-%d") === date || _dateCheck(date) {
BI.print(BI.parseDateTime(date, "%Y-%X-%d"), "%Y-%X-%d") === date || return print(parseDateTime(date, "%Y-%x-%d"), "%Y-%x-%d") === date ||
BI.print(BI.parseDateTime(date, "%Y-%x-%e"), "%Y-%x-%e") === date || print(parseDateTime(date, "%Y-%X-%d"), "%Y-%X-%d") === date ||
BI.print(BI.parseDateTime(date, "%Y-%X-%e"), "%Y-%X-%e") === date; print(parseDateTime(date, "%Y-%x-%e"), "%Y-%x-%e") === date ||
}, print(parseDateTime(date, "%Y-%X-%e"), "%Y-%X-%e") === date;
_checkVoid: function (obj) { }
var o = this.options;
return !BI.checkDateVoid(obj.year, obj.month, obj.day, o.minDate, o.maxDate)[0]; _checkVoid(obj) {
}, const o = this.options;
_check: function (smallDate, bigDate) {
var smallObj = smallDate.match(/\d+/g), bigObj = bigDate.match(/\d+/g); return !checkDateVoid(obj.year, obj.month, obj.day, o.minDate, o.maxDate)[0];
return this._dateCheck(smallDate) && BI.checkDateLegal(smallDate) && this._checkVoid({ }
_check(smallDate, bigDate) {
const smallObj = smallDate.match(/\d+/g),
bigObj = bigDate.match(/\d+/g);
return this._dateCheck(smallDate) && checkDateLegal(smallDate) && this._checkVoid({
year: smallObj[0], year: smallObj[0],
month: smallObj[1], month: smallObj[1],
day: smallObj[2] day: smallObj[2],
}) && this._dateCheck(bigDate) && BI.checkDateLegal(bigDate) && this._checkVoid({ }) && this._dateCheck(bigDate) && checkDateLegal(bigDate) && this._checkVoid({
year: bigObj[0], year: bigObj[0],
month: bigObj[1], month: bigObj[1],
day: bigObj[2] day: bigObj[2],
}); });
}, }
_compare: function (smallDate, bigDate) {
smallDate = BI.print(BI.parseDateTime(smallDate, "%Y-%X-%d"), "%Y-%X-%d"); _compare(smallDate, bigDate) {
bigDate = BI.print(BI.parseDateTime(bigDate, "%Y-%X-%d"), "%Y-%X-%d"); smallDate = print(parseDateTime(smallDate, "%Y-%X-%d"), "%Y-%X-%d");
return BI.isNotNull(smallDate) && BI.isNotNull(bigDate) && smallDate > bigDate; bigDate = print(parseDateTime(bigDate, "%Y-%X-%d"), "%Y-%X-%d");
},
_setTitle: function (v) { return isNotNull(smallDate) && isNotNull(bigDate) && smallDate > bigDate;
}
_setTitle(v) {
this.left.setTitle(v); this.left.setTitle(v);
this.right.setTitle(v); this.right.setTitle(v);
this.label.setTitle(v); this.label.setTitle(v);
}, }
_clearTitle: function () {
_clearTitle() {
this.left.setTitle(""); this.left.setTitle("");
this.right.setTitle(""); this.right.setTitle("");
this.label.setTitle(""); this.label.setTitle("");
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
var o = this.options; const o = this.options;
o.minDate = minDate; o.minDate = minDate;
this.left.setMinDate(minDate); this.left.setMinDate(minDate);
this.right.setMinDate(minDate); this.right.setMinDate(minDate);
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
var o = this.options; const o = this.options;
o.maxDate = maxDate; o.maxDate = maxDate;
this.left.setMaxDate(maxDate); this.left.setMaxDate(maxDate);
this.right.setMaxDate(maxDate); this.right.setMaxDate(maxDate);
}, }
setValue: function (date) { setValue(date) {
date = date || {}; date = date || {};
this.left.setValue(date.start); this.left.setValue(date.start);
this.right.setValue(date.end); this.right.setValue(date.end);
},
getValue: function () {
return {start: this.left.getValue(), end: this.right.getValue()};
} }
});
BI.DateInterval.EVENT_VALID = "EVENT_VALID"; getValue() {
BI.DateInterval.EVENT_ERROR = "EVENT_ERROR"; return {
BI.DateInterval.EVENT_CHANGE = "EVENT_CHANGE"; start: this.left.getValue(),
BI.DateInterval.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; end: this.right.getValue(),
BI.shortcut("bi.date_interval", BI.DateInterval); };
}
}

3
src/widget/timeinterval/index.js

@ -0,0 +1,3 @@
export { DateInterval } from "./dateinterval";
export { TimeInterval } from "./timeinterval";
export { TimePeriods } from "./timeperiods";

244
src/widget/timeinterval/timeinterval.js

@ -1,27 +1,37 @@
/** import { shortcut, extend, createWidget, i18nText, print, parseDateTime, checkDateVoid, checkDateLegal, isNotNull } from "@/core";
* Created by Baron on 2015/10/19. import { Single, Label, Bubbles } from "@/base";
*/ import { DynamicDateTimeCombo } from "../dynamicdatetime";
BI.TimeInterval = BI.inherit(BI.Single, {
constants: { @shortcut()
export class TimeInterval extends Single {
static xtype = "bi.time_interval"
constants = {
height: 24, height: 24,
width: 24, width: 24,
lgap: 15, lgap: 15,
offset: 0, offset: 0,
timeErrorCls: "time-error" timeErrorCls: "time-error",
}, };
_defaultConfig: function () {
var conf = BI.TimeInterval.superclass._defaultConfig.apply(this, arguments); static EVENT_VALID = "EVENT_VALID"
return BI.extend(conf, { static EVENT_ERROR = "EVENT_ERROR"
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: "bi-time-interval", extraCls: "bi-time-interval",
minDate: "1900-01-01", minDate: "1900-01-01",
maxDate: "2099-12-31", maxDate: "2099-12-31",
height: 24, height: 24,
supportDynamic: true supportDynamic: true,
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const o = this.options;
o.value = o.value || {}; o.value = o.value || {};
this.left = this._createCombo(o.value.start, o.watermark?.start); this.left = this._createCombo(o.value.start, o.watermark?.start);
this.right = this._createCombo(o.value.end, o.watermark?.end); this.right = this._createCombo(o.value.end, o.watermark?.end);
@ -30,158 +40,172 @@ BI.TimeInterval = BI.inherit(BI.Single, {
type: "bi.horizontal_fill", type: "bi.horizontal_fill",
columnSize: ["fill", "", "fill"], columnSize: ["fill", "", "fill"],
items: [{ items: [{
el: self.left el: this.left,
}, { }, {
el: { el: {
type: "bi.label", type: Label.xtype,
height: o.height, height: o.height,
hgap: 5, hgap: 5,
text: "-", text: "-",
ref: function (_ref) { ref: _ref => {
self.label = _ref; this.label = _ref;
} },
} },
}, { }, {
el: self.right el: this.right,
}] }],
}; };
}, }
_createCombo: function (v, watermark) { _createCombo(v, watermark) {
var self = this, o = this.options; const o = this.options;
var combo = BI.createWidget({ const combo = createWidget({
type: "bi.dynamic_date_time_combo", type: DynamicDateTimeCombo.xtype,
simple: o.simple, simple: o.simple,
supportDynamic: o.supportDynamic, supportDynamic: o.supportDynamic,
minDate: o.minDate, minDate: o.minDate,
maxDate: o.maxDate, maxDate: o.maxDate,
behaviors: o.behaviors, behaviors: o.behaviors,
watermark: watermark, watermark,
value: v, value: v,
height: o.height, height: o.height,
}); });
combo.on(BI.DynamicDateTimeCombo.EVENT_ERROR, function () { combo.on(DynamicDateTimeCombo.EVENT_ERROR, () => {
self._clearTitle(); this._clearTitle();
BI.Bubbles.hide("error"); Bubbles.hide("error");
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
self.fireEvent(BI.TimeInterval.EVENT_ERROR); this.fireEvent(TimeInterval.EVENT_ERROR);
}); });
combo.on(BI.DynamicDateTimeCombo.EVENT_VALID, function () { combo.on(DynamicDateTimeCombo.EVENT_VALID, () => {
BI.Bubbles.hide("error"); Bubbles.hide("error");
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); const smallDate = this.left.getKey(),
if (self.left.isValid() && self.right.isValid() && self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { bigDate = this.right.getKey();
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); if (this.left.isValid() && this.right.isValid() && this._check(smallDate, bigDate) && this._compare(smallDate, bigDate)) {
self.element.addClass(self.constants.timeErrorCls); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
BI.Bubbles.show("error", BI.i18nText("BI-Time_Interval_Error_Text"), self, { this.element.addClass(this.constants.timeErrorCls);
offsetStyle: "center" Bubbles.show("error", i18nText("BI-Time_Interval_Error_Text"), this, {
offsetStyle: "center",
}); });
self.fireEvent(BI.TimeInterval.EVENT_ERROR); this.fireEvent(TimeInterval.EVENT_ERROR);
} else { } else {
self._clearTitle(); this._clearTitle();
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
} }
}); });
combo.on(BI.DynamicDateTimeCombo.EVENT_FOCUS, function () { combo.on(DynamicDateTimeCombo.EVENT_FOCUS, () => {
BI.Bubbles.hide("error"); Bubbles.hide("error");
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); const smallDate = this.left.getKey(),
if (self.left.isValid() && self.right.isValid() && self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { bigDate = this.right.getKey();
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); if (this.left.isValid() && this.right.isValid() && this._check(smallDate, bigDate) && this._compare(smallDate, bigDate)) {
self.element.addClass(self.constants.timeErrorCls); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
BI.Bubbles.show("error", BI.i18nText("BI-Time_Interval_Error_Text"), self, { this.element.addClass(this.constants.timeErrorCls);
offsetStyle: "center" Bubbles.show("error", i18nText("BI-Time_Interval_Error_Text"), this, {
offsetStyle: "center",
}); });
self.fireEvent(BI.TimeInterval.EVENT_ERROR); this.fireEvent(TimeInterval.EVENT_ERROR);
} else { } else {
self._clearTitle(); this._clearTitle();
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
} }
}); });
// 不知道干啥的,先注释掉 // 不知道干啥的,先注释掉
// combo.on(BI.DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW, function () { // combo.on(DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW, () => {
// self.left.hidePopupView(); // this.left.hidePopupView();
// self.right.hidePopupView(); // this.right.hidePopupView();
// }); // });
combo.on(BI.DynamicDateTimeCombo.EVENT_CONFIRM, function () { combo.on(DynamicDateTimeCombo.EVENT_CONFIRM, () => {
BI.Bubbles.hide("error"); Bubbles.hide("error");
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); const smallDate = this.left.getKey(),
if (self.left.isValid() && self.right.isValid() && self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { bigDate = this.right.getKey();
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); if (this.left.isValid() && this.right.isValid() && this._check(smallDate, bigDate) && this._compare(smallDate, bigDate)) {
self.element.addClass(self.constants.timeErrorCls); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
self.fireEvent(BI.TimeInterval.EVENT_ERROR); this.element.addClass(this.constants.timeErrorCls);
this.fireEvent(TimeInterval.EVENT_ERROR);
} else { } else {
self._clearTitle(); this._clearTitle();
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
self.fireEvent(BI.TimeInterval.EVENT_CHANGE); this.fireEvent(TimeInterval.EVENT_CHANGE);
} }
}); });
return combo; return combo;
}, }
_dateCheck: function (date) {
return BI.print(BI.parseDateTime(date, "%Y-%x-%d %H:%M:%S"), "%Y-%x-%d %H:%M:%S") === date || _dateCheck(date) {
BI.print(BI.parseDateTime(date, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S") === date || return print(parseDateTime(date, "%Y-%x-%d %H:%M:%S"), "%Y-%x-%d %H:%M:%S") === date ||
BI.print(BI.parseDateTime(date, "%Y-%x-%e %H:%M:%S"), "%Y-%x-%e %H:%M:%S") === date || print(parseDateTime(date, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S") === date ||
BI.print(BI.parseDateTime(date, "%Y-%X-%e %H:%M:%S"), "%Y-%X-%e %H:%M:%S") === date; print(parseDateTime(date, "%Y-%x-%e %H:%M:%S"), "%Y-%x-%e %H:%M:%S") === date ||
}, print(parseDateTime(date, "%Y-%X-%e %H:%M:%S"), "%Y-%X-%e %H:%M:%S") === date;
_checkVoid: function (obj) { }
var o = this.options;
return !BI.checkDateVoid(obj.year, obj.month, obj.day, o.minDate, o.maxDate)[0]; _checkVoid(obj) {
}, const o = this.options;
_check: function (smallDate, bigDate) {
var smallObj = smallDate.match(/\d+/g), bigObj = bigDate.match(/\d+/g); return !checkDateVoid(obj.year, obj.month, obj.day, o.minDate, o.maxDate)[0];
return this._dateCheck(smallDate) && BI.checkDateLegal(smallDate) && this._checkVoid({ }
_check(smallDate, bigDate) {
const smallObj = smallDate.match(/\d+/g),
bigObj = bigDate.match(/\d+/g);
return this._dateCheck(smallDate) && checkDateLegal(smallDate) && this._checkVoid({
year: smallObj[0], year: smallObj[0],
month: smallObj[1], month: smallObj[1],
day: smallObj[2] day: smallObj[2],
}) && this._dateCheck(bigDate) && BI.checkDateLegal(bigDate) && this._checkVoid({ }) && this._dateCheck(bigDate) && checkDateLegal(bigDate) && this._checkVoid({
year: bigObj[0], year: bigObj[0],
month: bigObj[1], month: bigObj[1],
day: bigObj[2] day: bigObj[2],
}); });
}, }
_compare: function (smallDate, bigDate) {
smallDate = BI.print(BI.parseDateTime(smallDate, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S"); _compare(smallDate, bigDate) {
bigDate = BI.print(BI.parseDateTime(bigDate, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S"); smallDate = print(parseDateTime(smallDate, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S");
return BI.isNotNull(smallDate) && BI.isNotNull(bigDate) && smallDate > bigDate; bigDate = print(parseDateTime(bigDate, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S");
},
_setTitle: function (v) { return isNotNull(smallDate) && isNotNull(bigDate) && smallDate > bigDate;
}
_setTitle(v) {
this.left.setTitle(v); this.left.setTitle(v);
this.right.setTitle(v); this.right.setTitle(v);
this.label.setTitle(v); this.label.setTitle(v);
}, }
_clearTitle: function () {
_clearTitle() {
this.left.setTitle(""); this.left.setTitle("");
this.right.setTitle(""); this.right.setTitle("");
this.label.setTitle(""); this.label.setTitle("");
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
var o = this.options; const o = this.options;
o.minDate = minDate; o.minDate = minDate;
this.left.setMinDate(minDate); this.left.setMinDate(minDate);
this.right.setMinDate(minDate); this.right.setMinDate(minDate);
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
var o = this.options; const o = this.options;
o.maxDate = maxDate; o.maxDate = maxDate;
this.left.setMaxDate(maxDate); this.left.setMaxDate(maxDate);
this.right.setMaxDate(maxDate); this.right.setMaxDate(maxDate);
}, }
setValue: function (date) { setValue(date) {
date = date || {}; date = date || {};
this.left.setValue(date.start); this.left.setValue(date.start);
this.right.setValue(date.end); this.right.setValue(date.end);
},
getValue: function () {
return {start: this.left.getValue(), end: this.right.getValue()};
} }
});
BI.TimeInterval.EVENT_VALID = "EVENT_VALID"; getValue() {
BI.TimeInterval.EVENT_ERROR = "EVENT_ERROR"; return {
BI.TimeInterval.EVENT_CHANGE = "EVENT_CHANGE"; start: this.left.getValue(),
BI.shortcut("bi.time_interval", BI.TimeInterval); end: this.right.getValue(),
};
}
}

126
src/widget/timeinterval/timeperiods.js

@ -1,92 +1,90 @@
/** import { shortcut, extend } from "@/core";
* 时间区间 import { Single, Label } from "@/base";
* qcc import { TimeCombo } from "../time";
* 2019/2/28
*/
!(function () { @shortcut()
BI.TimePeriods = BI.inherit(BI.Single, { export class TimePeriods extends Single {
constants: { static xtype = "bi.time_periods"
height: 24,
width: 24, props = {
hgap: 15,
offset: -15
},
props: {
extraCls: "bi-time-interval", extraCls: "bi-time-interval",
value: {} value: {},
}, };
render: function () { static EVENT_CONFIRM = "EVENT_CONFIRM"
var self = this, o = this.options; static EVENT_CHANGE = "EVENT_CHANGE"
render() {
const o = this.options;
return { return {
type: "bi.horizontal_fill", type: "bi.horizontal_fill",
columnSize: ["fill", "", "fill"], columnSize: ["fill", "", "fill"],
items: [{ items: [{
el: BI.extend({ el: extend({
ref: function (_ref) { ref: _ref => {
self.left = _ref; this.left = _ref;
} },
}, this._createCombo(o.value.start, o.watermark?.start)) }, this._createCombo(o.value.start, o.watermark?.start)),
}, { }, {
el: { el: {
type: "bi.label", type: Label.xtype,
height: o.height, height: o.height,
hgap: 5, hgap: 5,
text: "-", text: "-",
ref: function (_ref) { ref: _ref => {
self.label = _ref; this.label = _ref;
} },
} },
}, { }, {
el: BI.extend({ el: extend({
ref: function (_ref) { ref: _ref => {
self.right = _ref; this.right = _ref;
}
}, this._createCombo(o.value.end, o.watermark?.end))
}]
};
}, },
}, this._createCombo(o.value.end, o.watermark?.end)),
}],
};
}
_createCombo(v, watermark) {
const o = this.options;
_createCombo: function (v, watermark) {
var self = this;
var o = this.options;
return { return {
type: "bi.time_combo", type: TimeCombo.xtype,
value: v, value: v,
height: o.height, height: o.height,
watermark: watermark, watermark,
listeners: [{ listeners: [{
eventName: BI.TimeCombo.EVENT_BEFORE_POPUPVIEW, eventName: TimeCombo.EVENT_BEFORE_POPUPVIEW,
action: function () { action: () => {
self.left.hidePopupView(); this.left.hidePopupView();
self.right.hidePopupView(); this.right.hidePopupView();
} },
}, { }, {
eventName: BI.TimeCombo.EVENT_CHANGE, eventName: TimeCombo.EVENT_CHANGE,
action: function () { action: () => {
self.fireEvent(BI.TimePeriods.EVENT_CHANGE); this.fireEvent(TimePeriods.EVENT_CHANGE);
} },
}, { }, {
eventName: BI.TimeCombo.EVENT_CONFIRM, eventName: TimeCombo.EVENT_CONFIRM,
action: function () { action: () => {
self.fireEvent(BI.TimePeriods.EVENT_CONFIRM); this.fireEvent(TimePeriods.EVENT_CONFIRM);
}
}]
};
}, },
}],
};
}
setValue: function (date) { setValue(date) {
date = date || {}; date = date || {};
this.left.setValue(date.start); this.left.setValue(date.start);
this.right.setValue(date.end); this.right.setValue(date.end);
},
getValue: function () {
return {start: this.left.getValue(), end: this.right.getValue()};
} }
});
BI.TimePeriods.EVENT_CONFIRM = "EVENT_CONFIRM"; getValue() {
BI.TimePeriods.EVENT_CHANGE = "EVENT_CHANGE"; return {
BI.shortcut("bi.time_periods", BI.TimePeriods); start: this.left.getValue(),
})(); end: this.right.getValue(),
};
}
}

Loading…
Cancel
Save