KERNEL-14092 refactor: widget/timeinterval

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

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

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.
- * @class BI.Calendar
- * @extends BI.Widget
+ * @class Calendar
+ * @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()
 export class Calendar extends Widget {
     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 () {
         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,
-        };
-    },
-});
-

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.
- * @class BI.YearCalendar
- * @extends BI.Widget
+ * @class YearCalendar
+ * @extends Widget
  */
-import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core";
 @shortcut()
 export class YearCalendar extends Widget {
     static xtype = "bi.year_calendar";
+    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 () {
         const conf = super._defaultConfig(...arguments);
         
@@ -150,28 +171,3 @@ export class YearCalendar extends Widget {
         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;
-    },
-});
-
-

src/core/logic/index.js

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

src/widget/dynamicdate/dynamicdate.trigger.js

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

src/widget/timeinterval/dateinterval.js

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

src/widget/timeinterval/index.js

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

src/widget/timeinterval/timeinterval.js

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

src/widget/timeinterval/timeperiods.js

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