From 6b1aeb6d9f49def0d7c773be77f926e1efc61d17 Mon Sep 17 00:00:00 2001 From: "crawford.zhou" Date: Thu, 12 Jan 2023 19:16:54 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14067=20feat:year=20&&=20yearInterval=20?= =?UTF-8?q?=E7=9A=84es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widget/index.js | 10 +- src/widget/year/card.dynamic.year.js | 135 ++++---- src/widget/year/card.year.js | 229 ++++++------ src/widget/year/combo.year.js | 262 +++++++------- src/widget/year/index.js | 5 + src/widget/year/popup.year.js | 440 ++++++++++++++---------- src/widget/year/trigger.year.js | 291 ++++++++-------- src/widget/yearinterval/yearinterval.js | 296 +++++++++------- 8 files changed, 914 insertions(+), 754 deletions(-) create mode 100644 src/widget/year/index.js diff --git a/src/widget/index.js b/src/widget/index.js index 874fd77cd..e86e9e362 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -19,7 +19,8 @@ import { NumberEditor } from "./numbereditor/number.editor"; import { NumberInterval } from "./numberinterval/numberinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; - +import * as year from "./year"; +import { YearInterval } from "./yearinterval/yearinterval"; Object.assign(BI, { Collapse, ...calendar, @@ -29,6 +30,7 @@ Object.assign(BI, { ...datetimepane, ...dynamicdatetime, ...time, + ...year, ...editor, ...downList, ...singleSliderItem, @@ -40,6 +42,7 @@ Object.assign(BI, { MultiTreeListCombo, NumberEditor, NumberInterval, + YearInterval, ...multiselect, ...multiselectlist, }); @@ -57,7 +60,7 @@ export * from "./multiselectlist"; export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; - +export * from "./year"; export { Collapse, NumberEditor, @@ -66,5 +69,6 @@ export { SingleTreeCombo, MultiTreeCombo, MultiTreeInsertCombo, - MultiTreeListCombo + MultiTreeListCombo, + YearInterval }; diff --git a/src/widget/year/card.dynamic.year.js b/src/widget/year/card.dynamic.year.js index b38d55119..8edcb0047 100644 --- a/src/widget/year/card.dynamic.year.js +++ b/src/widget/year/card.dynamic.year.js @@ -5,115 +5,118 @@ * @class BI.YearCard * @extends BI.Trigger */ -BI.DynamicYearCard = BI.inherit(BI.Widget, { +import { checkDateVoid, i18nText, isNotEmptyString, parseDateTime, shortcut, VerticalLayout, Widget } from "@/core"; +import { Bubbles, Label } from "@/base"; +import { DynamicDateCard, DynamicDateHelper, DynamicDateParamItem } from "@/widget"; - props: { - baseCls: "bi-year-card" - }, - - render: function () { - var self = this, o = this.options; +@shortcut() +export class DynamicYearCard extends Widget { + static xtype = "bi.dynamic_year_card"; + static EVENT_CHANGE = "EVENT_CHANGE"; + props = { + baseCls: "bi-year-card", + } + render() { return { - type: "bi.vertical", - ref: function (_ref) { - self.wrapper = _ref; + type: VerticalLayout.xtype, + ref: _ref => { + this.wrapper = _ref; }, items: [{ - type: "bi.label", - text: BI.i18nText("BI-Multi_Date_Relative_Current_Time"), + type: Label.xtype, + text: i18nText("BI-Multi_Date_Relative_Current_Time"), textAlign: "left", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }, { - type: "bi.dynamic_date_param_item", - ref: function () { - self.item = this; + type: DynamicDateParamItem.xtype, + ref: _ref => { + this.item = _ref; }, listeners: [{ eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, }, { eventName: "EVENT_INPUT_CHANGE", - action: function () { - BI.Bubbles.hide("dynamic-year-error"); - } - }] + action: () => { + Bubbles.hide("dynamic-year-error"); + }, + }], }], vgap: 10, - hgap: 10 + hgap: 10, }; - }, - - _checkDate: function (obj) { - var o = this.options; - var date = BI.DynamicDateHelper.getCalculation(this._getValue()); + } + _checkDate() { + const o = this.options; + const date = DynamicDateHelper.getCalculation(this._getValue()); - return !BI.checkDateVoid(date.getFullYear(), date.getMonth() + 1, date.getDate(), o.min, o.max)[0]; - }, + return !checkDateVoid(date.getFullYear(), date.getMonth() + 1, date.getDate(), o.min, o.max)[0]; + } - _createValue: function (type, v) { + _createValue(type, v) { return { dateType: type, value: Math.abs(v), - offset: v > 0 ? 1 : 0 + offset: v > 0 ? 1 : 0, }; - }, + } - _getErrorText: function () { - var o = this.options; - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); - return BI.i18nText("BI-Basic_Year_Range_Error", + _getErrorText() { + const o = this.options; + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); + + return i18nText("BI-Basic_Year_Range_Error", start.getFullYear(), end.getFullYear()); - }, + } - setMinDate: function(minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; } - }, + } - setValue: function (v) { - v = v || {year: 0}; - this.item.setValue(this._createValue(BI.DynamicDateCard.TYPE.YEAR, v.year)); - }, + setValue(v) { + v = v || { year: 0 }; + this.item.setValue(this._createValue(DynamicDateCard.TYPE.YEAR, v.year)); + } - _getValue: function () { - var value = this.item.getValue(); + _getValue() { + const value = this.item.getValue(); + return { - year: (value.offset === 0 ? -value.value : +value.value) + year: (value.offset === 0 ? -value.value : +value.value), }; - }, + } - getInputValue: function () { + getInputValue() { return this._getValue(); - }, + } - getValue: function () { + getValue() { return this.checkValidation() ? this._getValue() : {}; - }, + } - checkValidation: function (show) { - var errorText; - var invalid = !this.item.checkValidation(); + checkValidation(show) { + let errorText; + let invalid = !this.item.checkValidation(); if (invalid) { - errorText = BI.i18nText("BI-Please_Input_Natural_Number"); + errorText = i18nText("BI-Please_Input_Natural_Number"); } else { invalid = !this._checkDate(this._getValue()); errorText = this._getErrorText(); } - invalid && show && BI.Bubbles.show("dynamic-year-error", errorText, this.item); + invalid && show && Bubbles.show("dynamic-year-error", errorText, this.item, {}); return !invalid; - }, -}); -BI.DynamicYearCard.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.dynamic_year_card", BI.DynamicYearCard); \ No newline at end of file + } +} diff --git a/src/widget/year/card.year.js b/src/widget/year/card.year.js index b747d104b..2eb1149de 100644 --- a/src/widget/year/card.year.js +++ b/src/widget/year/card.year.js @@ -1,194 +1,205 @@ -/** - * 年份展示面板 - * - * Created by GUY on 2015/9/2. - * @class BI.StaticYearCard - * @extends BI.Trigger - */ -BI.StaticYearCard = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.StaticYearCard.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, createWidget, getDate, bind, Controller, isKey, HTapeLayout, CenterAdaptLayout, Layout, each, isNotEmptyString, checkDateVoid, parseInt } from "@/core"; +import { YearCalendar } from "@/case"; +import { IconButton, Navigation } from "@/base"; + +@shortcut() +export class StaticYearCard extends Widget { + static xtype = "bi.static_year_card"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-year-card", behaviors: {}, min: "1900-01-01", // 最小日期 - max: "2099-12-31" // 最大日期 + max: "2099-12-31", // 最大日期 }); - }, - - _createYearCalendar: function (v) { - var o = this.options, y = this._year; + } - var calendar = BI.createWidget({ - type: "bi.year_calendar", + _createYearCalendar(v) { + const o = this.options, + y = this._year; + const calendar = createWidget({ + type: YearCalendar.xtype, behaviors: o.behaviors, min: o.min, max: o.max, logic: { - dynamic: true + dynamic: true, }, - year: y + v * 12 + year: y + v * 12, }); calendar.setValue(this._year); + return calendar; - }, - - _init: function () { - BI.StaticYearCard.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } - this.selectedYear = this._year = BI.getDate().getFullYear(); + _init() { + super._init(...arguments); + const o = this.options; - this.backBtn = BI.createWidget({ - type: "bi.icon_button", + this.selectedYear = this._year = getDate().getFullYear(); + this.backBtn = createWidget({ + type: IconButton.xtype, cls: "pre-page-h-font", width: 25, height: 25, value: -1, - listeners: [{ - eventName: BI.IconButton.EVENT_CHANGE, - action: function () { - self.navigation.setSelect(self.navigation.getSelect() - 1); - self._checkLeftValid(); - self._checkRightValid(); + listeners: [ + { + eventName: IconButton.EVENT_CHANGE, + action :() => { + this.navigation.setSelect( + this.navigation.getSelect() - 1 + ); + this._checkLeftValid(); + this._checkRightValid(); + }, } - }] + ], }); - this.preBtn = BI.createWidget({ - type: "bi.icon_button", + this.preBtn = createWidget({ + type: IconButton.xtype, cls: "next-page-h-font", width: 25, height: 25, value: 1, - listeners: [{ - eventName: BI.IconButton.EVENT_CHANGE, - action: function () { - self.navigation.setSelect(self.navigation.getSelect() + 1); - self._checkLeftValid(); - self._checkRightValid(); + listeners: [ + { + eventName: IconButton.EVENT_CHANGE, + action :() => { + this.navigation.setSelect( + this.navigation.getSelect() + 1 + ); + this._checkLeftValid(); + this._checkRightValid(); + }, } - }] + ], }); - this.navigation = BI.createWidget({ - type: "bi.navigation", + this.navigation = createWidget({ + type: Navigation.xtype, direction: "top", element: this, single: true, logic: { - dynamic: true + dynamic: true, }, tab: { - type: "bi.htape", + type: HTapeLayout.xtype, cls: "bi-split-top bi-split-bottom", height: 30, - items: [{ - el: { - type: "bi.center_adapt", - items: [self.backBtn] + items: [ + { + el: { + type: CenterAdaptLayout.xtype, + items: [this.backBtn], + }, + width: 25, }, - width: 25 - }, { - type: "bi.layout" - }, { - el: { - type: "bi.center_adapt", - items: [self.preBtn] + { + type: Layout.xtype, }, - width: 25 - }] + { + el: { + type: CenterAdaptLayout.xtype, + items: [this.preBtn], + }, + width: 25, + } + ], }, - cardCreator: BI.bind(this._createYearCalendar, this), + cardCreator: bind(this._createYearCalendar, this), - afterCardShow: function () { - this.setValue(self.selectedYear); + afterCardShow: () => { + this.navigation.setValue(this.selectedYear); // var calendar = this.getSelectedCard(); - // self.backBtn.setEnable(!calendar.isFrontYear()); - // self.preBtn.setEnable(!calendar.isFinalYear()); - } + // this.backBtn.setEnable(!calendar.isFrontYear()); + // this.preBtn.setEnable(!calendar.isFinalYear()); + }, }); - this.navigation.on(BI.Navigation.EVENT_CHANGE, function () { - self.selectedYear = this.getValue(); - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - self.fireEvent(BI.StaticYearCard.EVENT_CHANGE, self.selectedYear); + this.navigation.on(Navigation.EVENT_CHANGE, () => { + this.selectedYear = this.navigation.getValue(); + this.fireEvent(Controller.EVENT_CHANGE, ...arguments); + this.fireEvent(StaticYearCard.EVENT_CHANGE, this.selectedYear); }); - if(BI.isKey(o.value)){ + if (isKey(o.value)) { this.setValue(o.value); } - }, + } - _checkLeftValid: function () { - var o = this.options; - var valid = true; + _checkLeftValid() { + const valid = true; this.backBtn.setEnable(valid); + return valid; - }, + } - _checkRightValid: function () { - var o = this.options; - var valid = true; + _checkRightValid() { + const valid = true; this.preBtn.setEnable(valid); + return valid; - }, + } - _checkMin: function () { - var o = this.options; - BI.each(this.navigation.getAllCard(), function (idx, calendar) { + _checkMin() { + const o = this.options; + each(this.navigation.getAllCard(), (idx, calendar) => { calendar.setMinDate(o.min); }); - }, + } - _checkMax: function () { - var o = this.options; - BI.each(this.navigation.getAllCard(), function (idx, calendar) { + _checkMax() { + const o = this.options; + each(this.navigation.getAllCard(), (idx, calendar) => { calendar.setMaxDate(o.max); }); - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; this._checkLeftValid(); this._checkRightValid(); this._checkMin(); } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; this._checkLeftValid(); this._checkRightValid(); this._checkMax(); } - }, + } - getValue: function () { + getValue() { return { - year: this.selectedYear + year: this.selectedYear, }; - }, + } - setValue: function (obj) { - var o = this.options; + setValue(obj) { + const o = this.options; obj = obj || {}; - var v = obj.year; - if (BI.checkDateVoid(v, 1, 1, o.min, o.max)[0]) { - v = BI.getDate().getFullYear(); + let v = obj.year; + if (checkDateVoid(v, 1, 1, o.min, o.max)[0]) { + v = getDate().getFullYear(); this.selectedYear = ""; - this.navigation.setSelect(BI.YearCalendar.getPageByYear(v)); + this.navigation.setSelect(YearCalendar.getPageByYear(v)); this.navigation.setValue(""); } else { - this.selectedYear = BI.parseInt(v); - this.navigation.setSelect(BI.YearCalendar.getPageByYear(v)); + this.selectedYear = parseInt(v); + this.navigation.setSelect(YearCalendar.getPageByYear(v)); this.navigation.setValue(this.selectedYear); } this._checkLeftValid(); this._checkRightValid(); } -}); -BI.StaticYearCard.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.static_year_card", BI.StaticYearCard); \ No newline at end of file +} diff --git a/src/widget/year/combo.year.js b/src/widget/year/combo.year.js index d2d68d19b..a2ef773b9 100644 --- a/src/widget/year/combo.year.js +++ b/src/widget/year/combo.year.js @@ -1,73 +1,84 @@ -BI.DynamicYearCombo = BI.inherit(BI.Widget, { +import { shortcut, Widget, toPix, getDate, isNotNull, AbsoluteLayout, HorizontalFillLayout, extend } from "@/core"; +import { DynamicYearTrigger } from "@/widget/year/trigger.year"; +import { DynamicDateCombo } from "@/widget"; +import { Combo } from "@/base"; +import { DynamicYearPopup } from "@/widget/year/popup.year"; - _const: { - iconWidth: 24 - }, +@shortcut() +export class DynamicYearCombo extends Widget { + static xtype = "bi.dynamic_year_combo"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_FOCUS = "EVENT_FOCUS"; + _const ={ + iconWidth: 24, + } - props: { + props={ baseCls: "bi-year-combo", behaviors: {}, minDate: "1900-01-01", // 最小日期 maxDate: "2099-12-31", // 最大日期 height: 24, - supportDynamic: true - }, + supportDynamic: true, + } - _init: function () { - var self = this, o = this.options; - BI.DynamicYearCombo.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); this.storeValue = o.value; - var border = o.simple ? 1 : 2; + const border = o.simple ? 1 : 2; this.trigger = BI.createWidget({ - type: "bi.dynamic_year_trigger", + type: DynamicYearTrigger.xtype, simple: o.simple, min: o.minDate, max: o.maxDate, - height: BI.toPix(o.height, border), + height: toPix(o.height, border), value: o.value || "", - watermark: o.watermark + watermark: o.watermark, }); - this.trigger.on(BI.DynamicYearTrigger.EVENT_KEY_DOWN, function () { - if (self.combo.isViewVisible()) { - self.combo.hideView(); + this.trigger.on(DynamicYearTrigger.EVENT_KEY_DOWN, () => { + if (this.combo.isViewVisible()) { + this.combo.hideView(); } }); - this.trigger.on(BI.DynamicYearTrigger.EVENT_FOCUS, function () { - self.storeTriggerValue = this.getKey(); - self.fireEvent(BI.DynamicYearCombo.EVENT_FOCUS); + this.trigger.on(DynamicYearTrigger.EVENT_FOCUS, () => { + this.storeTriggerValue = this.getKey(); + this.fireEvent(DynamicYearCombo.EVENT_FOCUS); }); - this.trigger.on(BI.DynamicYearTrigger.EVENT_START, function () { - self.combo.isViewVisible() && self.combo.hideView(); + this.trigger.on(DynamicYearTrigger.EVENT_START, () => { + this.combo.isViewVisible() && this.combo.hideView(); }); - this.trigger.on(BI.DynamicYearTrigger.EVENT_STOP, function () { - self.combo.showView(); + this.trigger.on(DynamicYearTrigger.EVENT_STOP, () => { + this.combo.showView(); }); - this.trigger.on(BI.DynamicYearTrigger.EVENT_ERROR, function () { - self.combo.isViewVisible() && self.combo.hideView(); - self.comboWrapper.element.addClass("error"); - self.fireEvent(BI.DynamicYearCombo.EVENT_ERROR); + this.trigger.on(DynamicYearTrigger.EVENT_ERROR, () => { + this.combo.isViewVisible() && this.combo.hideView(); + this.comboWrapper.element.addClass("error"); + this.fireEvent(DynamicYearCombo.EVENT_ERROR); }); - this.trigger.on(BI.DynamicYearTrigger.EVENT_VALID, function () { - self.comboWrapper.element.removeClass("error"); - self.fireEvent(BI.DynamicYearCombo.EVENT_VALID); + this.trigger.on(DynamicYearTrigger.EVENT_VALID, () => { + this.comboWrapper.element.removeClass("error"); + this.fireEvent(DynamicYearCombo.EVENT_VALID); }); - this.trigger.on(BI.DynamicYearTrigger.EVENT_CONFIRM, function () { - if (self.combo.isViewVisible()) { + this.trigger.on(DynamicYearTrigger.EVENT_CONFIRM, () => { + if (this.combo.isViewVisible()) { return; } - if (this.getKey() && this.getKey() !== self.storeTriggerValue) { - self.storeValue = self.trigger.getValue(); - self.setValue(self.storeValue); + if (this.getKey() && this.getKey() !== this.storeTriggerValue) { + this.storeValue = this.trigger.getValue(); + this.setValue(this.storeValue); } else if (!this.getKey()) { - self.storeValue = null; - self.setValue(); + this.storeValue = null; + this.setValue(); } - self._checkDynamicValue(self.storeValue); - self.fireEvent(BI.DynamicYearCombo.EVENT_CONFIRM); + this._checkDynamicValue(this.storeValue); + this.fireEvent(DynamicYearCombo.EVENT_CONFIRM); }); - this.combo = BI.createWidget({ - type: "bi.combo", + type: Combo.xtype, container: o.container, isNeedAdjustHeight: false, isNeedAdjustWidth: false, @@ -78,150 +89,143 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, { minWidth: 85, stopPropagation: false, el: { - type: "bi.dynamic_year_popup", + type: DynamicYearPopup.xtype, supportDynamic: o.supportDynamic, - ref: function () { - self.popup = this; + ref: _ref => { + this.popup = _ref; }, listeners: [{ - eventName: BI.DynamicYearPopup.EVENT_CHANGE, - action: function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.DynamicYearCombo.EVENT_CONFIRM); - } + eventName: DynamicYearPopup.EVENT_CHANGE, + action:() => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent(DynamicYearCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicYearPopup.BUTTON_CLEAR_EVENT_CHANGE, - action: function () { - self.setValue(); - self.combo.hideView(); - self.fireEvent(BI.DynamicYearCombo.EVENT_CONFIRM); - } + eventName: DynamicYearPopup.BUTTON_CLEAR_EVENT_CHANGE, + action: () => { + this.setValue(); + this.combo.hideView(); + this.fireEvent(DynamicYearCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicYearPopup.BUTTON_lABEL_EVENT_CHANGE, - action: function () { - var date = BI.getDate(); - self.setValue({ type: BI.DynamicYearCombo.Static, value: { year: date.getFullYear() } }); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + eventName: DynamicYearPopup.BUTTON_lABEL_EVENT_CHANGE, + action: () => { + const date = getDate(); + this.setValue({ type: DynamicYearCombo.Static, value: { year: date.getFullYear() } }); + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicYearPopup.BUTTON_OK_EVENT_CHANGE, - action: function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + eventName: DynamicYearPopup.BUTTON_OK_EVENT_CHANGE, + action: () => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, }], behaviors: o.behaviors, min: o.minDate, - max: o.maxDate + max: o.maxDate, }, - value: o.value || "" - } + value: o.value || "", + }, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.popup.setMinDate(o.minDate); - self.popup.setMaxDate(o.maxDate); - self.popup.setValue(self.storeValue); - self.fireEvent(BI.DynamicYearCombo.EVENT_BEFORE_POPUPVIEW); + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.popup.setMinDate(o.minDate); + this.popup.setMaxDate(o.maxDate); + this.popup.setValue(this.storeValue); + this.fireEvent(DynamicYearCombo.EVENT_BEFORE_POPUPVIEW); }); BI.createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, items: [{ el: { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["", "fill"], - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow", - ref: function () { - self.comboWrapper = this; + cls: `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`, + ref: _ref => { + this.comboWrapper = _ref; }, items: [{ el: { type: "bi.icon_button", cls: "bi-trigger-icon-button date-change-h-font", width: this._const.iconWidth, - height: BI.toPix(o.height, border), - ref: function () { - self.changeIcon = this; - } + height: toPix(o.height, border), + ref: _ref => { + this.changeIcon = _ref; + }, }, - }, this.combo] + }, this.combo], }, top: 0, left: 0, right: 0, - bottom: 0 - }] + bottom: 0, + }], }); this._checkDynamicValue(o.value); - }, + } - _checkDynamicValue: function (v) { - var type = null; - if (BI.isNotNull(v)) { + _checkDynamicValue(v) { + let type = null; + if (isNotNull(v)) { type = v.type; } switch (type) { - case BI.DynamicYearCombo.Dynamic: - this.changeIcon.setVisible(true); - break; - default: - this.changeIcon.setVisible(false); - break; + case DynamicYearCombo.Dynamic: + this.changeIcon.setVisible(true); + break; + default: + this.changeIcon.setVisible(false); + break; } - }, + } - setMinDate: function (minDate) { - var o = this.options; + setMinDate(minDate) { + const o = this.options; o.minDate = minDate; this.trigger.setMinDate(minDate); this.popup && this.popup.setMinDate(minDate); - }, + } - setMaxDate: function (maxDate) { - var o = this.options; + setMaxDate(maxDate) { + const o = this.options; o.maxDate = maxDate; this.trigger.setMaxDate(maxDate); this.popup && this.popup.setMaxDate(maxDate); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - getKey: function () { - return this.trigger.getKey() + ""; - }, + getKey() { + return `${this.trigger.getKey()}`; + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this.trigger.setValue(v); this._checkDynamicValue(v); - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, + } - isStateValid: function () { + isStateValid() { return this.trigger.isValid(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); -BI.DynamicYearCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicYearCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.DynamicYearCombo.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicYearCombo.EVENT_VALID = "EVENT_VALID"; -BI.DynamicYearCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.shortcut("bi.dynamic_year_combo", BI.DynamicYearCombo); - -BI.extend(BI.DynamicYearCombo, { +} +extend(DynamicYearCombo, { Static: 1, - Dynamic: 2 + Dynamic: 2, }); diff --git a/src/widget/year/index.js b/src/widget/year/index.js new file mode 100644 index 000000000..bc5810fe7 --- /dev/null +++ b/src/widget/year/index.js @@ -0,0 +1,5 @@ +export { DynamicYearCard } from "./card.dynamic.year"; +export { StaticYearCard } from "./card.year"; +export { DynamicYearCombo } from "./combo.year"; +export { DynamicYearPopup } from "./popup.year"; +export { DynamicYearTrigger } from "./trigger.year"; diff --git a/src/widget/year/popup.year.js b/src/widget/year/popup.year.js index 2e6d4b952..9ce8e1d9a 100644 --- a/src/widget/year/popup.year.js +++ b/src/widget/year/popup.year.js @@ -1,246 +1,318 @@ -/** - * 年份展示面板 - * - * Created by GUY on 2015/9/2. - * @class BI.DynamicYearPopup - * @extends BI.Trigger - */ -BI.DynamicYearPopup = BI.inherit(BI.Widget, { - constants: { - tabHeight: 40, - }, +import { shortcut, Widget, toPix, i18nText, VerticalLayout, GridLayout, print, getDate, checkDateVoid, createItems } from "@/core"; +import { TextButton, Tab } from "@/base"; +import { DynamicDateCombo, DynamicDateHelper, DynamicYearCard, DynamicYearCombo, StaticYearCard } from "@/widget"; +import { LinearSegment } from "@/case"; - props: { +@shortcut() +export class DynamicYearPopup extends Widget { + static xtype = "bi.dynamic_year_popup"; + props = { baseCls: "bi-dynamic-year-popup", behaviors: {}, - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期, + min: "1900-01-01", + max: "2099-12-31", width: 180, supportDynamic: true, - }, + }; + constants = { + tabHeight: 40, + }; + static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; + static BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"; + static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; - render: function () { - var self = this, opts = this.options, c = this.constants; - this.storeValue = {type: BI.DynamicYearCombo.Static}; + render() { + this.storeValue = { type: DynamicYearCombo.Static }; + return { - type: "bi.vertical", - items: [{ - el: this._getTabJson() - }, { - el: { - type: "bi.grid", - items: [[{ - type: "bi.text_button", - cls: "bi-split-top bi-high-light", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Basic_Clear"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearPopup.BUTTON_CLEAR_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - cls: "bi-split-left bi-split-right bi-high-light bi-split-top", - shadow: true, - text: BI.i18nText("BI-Basic_Current_Year"), - disabled: this._checkTodayValid(), - ref: function () { - self.yearButton = this; - }, - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearPopup.BUTTON_lABEL_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-split-top bi-high-light", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Basic_OK"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - var type = self.dateTab.getSelect(); - if (type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.checkValidation(true) && self.fireEvent(BI.DynamicYearMonthPopup.BUTTON_OK_EVENT_CHANGE); - } else { - self.fireEvent(BI.DynamicYearPopup.BUTTON_OK_EVENT_CHANGE); - } - } - }] - }]], - height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + type: VerticalLayout.xtype, + items: [ + { + el: this._getTabJson(), }, - }] + { + el: { + type: GridLayout.xtype, + items: [ + [ + { + type: TextButton.xtype, + cls: "bi-split-top bi-high-light", + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + shadow: true, + text: i18nText("BI-Basic_Clear"), + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action :() => { + this.fireEvent( + DynamicYearPopup.BUTTON_CLEAR_EVENT_CHANGE + ); + }, + } + ], + }, + { + type: TextButton.xtype, + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + cls: "bi-split-left bi-split-right bi-high-light bi-split-top", + shadow: true, + text: i18nText("BI-Basic_Current_Year"), + disabled: this._checkTodayValid(), + ref: _ref => { + this.yearButton = _ref; + }, + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action :() => { + this.fireEvent( + DynamicYearPopup.BUTTON_lABEL_EVENT_CHANGE + ); + }, + } + ], + }, + { + type: TextButton.xtype, + cls: "bi-split-top bi-high-light", + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + shadow: true, + text: i18nText("BI-Basic_OK"), + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action :() => { + const type = + this.dateTab.getSelect(); + if ( + type === + DynamicDateCombo.Dynamic + ) { + this.dynamicPane.checkValidation( + true + ) && + this.fireEvent( + BI.DynamicYearMonthPopup.BUTTON_OK_EVENT_CHANGE + ); + } else { + this.fireEvent( + DynamicYearPopup.BUTTON_OK_EVENT_CHANGE + ); + } + }, + } + ], + } + ] + ], + height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + }, + } + ], }; - }, + } - _setInnerValue: function () { - if (this.dateTab.getSelect() === BI.DynamicDateCombo.Static) { - this.yearButton.setValue(BI.i18nText("BI-Basic_Current_Year")); + _setInnerValue() { + if (this.dateTab.getSelect() === DynamicDateCombo.Static) { + this.yearButton.setValue(i18nText("BI-Basic_Current_Year")); this.yearButton.setEnable(!this._checkYearValid()); } else { - var date = BI.DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); - date = BI.print(date, "%Y"); + let date = DynamicDateHelper.getCalculation( + this.dynamicPane.getInputValue() + ); + date = print(date, "%Y"); this.yearButton.setValue(date); this.yearButton.setEnable(false); } - }, + } - _checkYearValid: function () { - var o = this.options; - var today = BI.getDate(); - return !!BI.checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0]; - }, + _checkYearValid() { + const o = this.options; + const today = getDate(); + + return !!checkDateVoid( + today.getFullYear(), + today.getMonth() + 1, + today.getDate(), + o.min, + o.max + )[0]; + } - _getTabJson: function () { - var self = this, o = this.options; + _getTabJson() { + const o = this.options; + return { - type: "bi.tab", + type: Tab.xtype, logic: { - dynamic: true + dynamic: true, }, - ref: function () { - self.dateTab = this; + ref: _ref => { + this.dateTab = _ref; }, tab: { - type: "bi.linear_segment", + type: LinearSegment.xtype, invisible: !o.supportDynamic, height: this.constants.tabHeight, - items: BI.createItems([{ - text: BI.i18nText("BI-Basic_Year_Fen"), - value: BI.DynamicYearCombo.Static - }, { - text: BI.i18nText("BI-Basic_Dynamic_Title"), - value: BI.DynamicYearCombo.Dynamic - }], { - textAlign: "center" - }) + items: createItems( + [ + { + text: i18nText("BI-Basic_Year_Fen"), + value: DynamicYearCombo.Static, + }, + { + text: i18nText("BI-Basic_Dynamic_Title"), + value: DynamicYearCombo.Dynamic, + } + ], + { + textAlign: "center", + } + ), }, - cardCreator: function (v) { + cardCreator: v => { switch (v) { - case BI.DynamicYearCombo.Dynamic: - return { - type: "bi.dynamic_year_card", - cls: "dynamic-year-pane", - min: self.options.min, - max: self.options.max, - listeners: [{ + case DynamicYearCombo.Dynamic: + return { + type: DynamicYearCard.xtype, + cls: "dynamic-year-pane", + min: o.min, + max: o.max, + listeners: [ + { eventName: "EVENT_CHANGE", - action: function () { - self._setInnerValue(self.year, v); - } - }], - ref: function () { - self.dynamicPane = this; + action : () => { + this._setInnerValue(this.year, v); + }, } - }; - case BI.DynamicYearCombo.Static: - default: - return { - type: "bi.static_year_card", - behaviors: o.behaviors, - min: self.options.min, - max: self.options.max, - listeners: [{ - eventName: BI.StaticYearCard.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearPopup.EVENT_CHANGE); - } - }], - ref: function () { - self.year = this; + ], + ref: _ref => { + this.dynamicPane = _ref; + }, + }; + case DynamicYearCombo.Static: + default: + return { + type: StaticYearCard.xtype, + behaviors: o.behaviors, + min: o.min, + max: o.max, + listeners: [ + { + eventName: StaticYearCard.EVENT_CHANGE, + action: () => { + this.fireEvent( + DynamicYearPopup.EVENT_CHANGE + ); + }, } - }; + ], + ref: _ref => { + this.year = _ref; + }, + }; } }, - listeners: [{ - eventName: BI.Tab.EVENT_CHANGE, - action: function () { - var v = self.dateTab.getSelect(); - switch (v) { - case BI.DynamicYearCombo.Static: - var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); - self.year.setValue({year: date.getFullYear()}); - self._setInnerValue(); + listeners: [ + { + eventName: Tab.EVENT_CHANGE, + action :() => { + const v = this.dateTab.getSelect(); + switch (v) { + case DynamicYearCombo.Static: { + const date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue()); + this.year.setValue({ year: date.getFullYear() }); + this._setInnerValue(); break; - case BI.DynamicYearCombo.Dynamic: + } + case DynamicYearCombo.Dynamic: default: - if(self.storeValue && self.storeValue.type === BI.DynamicYearCombo.Dynamic) { - self.dynamicPane.setValue(self.storeValue.value); - }else{ - self.dynamicPane.setValue({ - year: 0 + if ( + this.storeValue && + this.storeValue.type === + DynamicYearCombo.Dynamic + ) { + this.dynamicPane.setValue( + this.storeValue.value + ); + } else { + this.dynamicPane.setValue({ + year: 0, }); } - self._setInnerValue(); + this._setInnerValue(); break; - } + } + }, } - }] + ], }; - }, + } - _checkTodayValid: function () { - var o = this.options; - var today = BI.getDate(); - return !!BI.checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0]; - }, + _checkTodayValid() { + const o = this.options; + const today = getDate(); + + return !!checkDateVoid( + today.getFullYear(), + today.getMonth() + 1, + today.getDate(), + o.min, + o.max + )[0]; + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.min !== minDate) { this.options.min = minDate; this.year && this.year.setMinDate(minDate); this.dynamicPane && this.dynamicPane.setMinDate(minDate); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.max !== maxDate) { this.options.max = maxDate; this.year && this.year.setMaxDate(maxDate); this.dynamicPane && this.dynamicPane.setMaxDate(maxDate); } - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; - var self = this; - var type, value; v = v || {}; - type = v.type || BI.DynamicDateCombo.Static; - value = v.value || v; + const type = v.type || DynamicDateCombo.Static; + const value = v.value || v; this.dateTab.setSelect(type); switch (type) { - case BI.DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); - self._setInnerValue(); - break; - case BI.DynamicDateCombo.Static: - default: - this.year.setValue(value); - this.yearButton.setValue(BI.i18nText("BI-Basic_Current_Year")); - this.yearButton.setEnable(!this._checkTodayValid()); - break; + case DynamicDateCombo.Dynamic: + this.dynamicPane.setValue(value); + this._setInnerValue(); + break; + case DynamicDateCombo.Static: + default: + this.year.setValue(value); + this.yearButton.setValue(i18nText("BI-Basic_Current_Year")); + this.yearButton.setEnable(!this._checkTodayValid()); + break; } - }, + } - getValue: function () { + getValue() { return { type: this.dateTab.getSelect(), - value: this.dateTab.getValue() + value: this.dateTab.getValue(), }; } - -}); -BI.DynamicYearPopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; -BI.DynamicYearPopup.BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"; -BI.DynamicYearPopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; -BI.DynamicYearPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.dynamic_year_popup", BI.DynamicYearPopup); +} diff --git a/src/widget/year/trigger.year.js b/src/widget/year/trigger.year.js index 2a9cb1fde..17db67598 100644 --- a/src/widget/year/trigger.year.js +++ b/src/widget/year/trigger.year.js @@ -1,204 +1,227 @@ -BI.DynamicYearTrigger = BI.inherit(BI.Trigger, { - _const: { - hgap: 4, - vgap: 2, - iconWidth: 24 - }, - - _defaultConfig: function () { - return BI.extend(BI.DynamicYearTrigger.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, i18nText, bind, createWidget, isPositiveInteger, checkDateVoid, parseDateTime, isNotNull, isNotEmptyString, parseInt, print, getDate, HorizontalFillLayout } from "@/core"; +import { Trigger, TextButton } from "@/base"; +import { SignEditor, TriggerIconButton } from "@/case"; +import { DynamicDateCombo, DynamicDateHelper } from "@/widget"; + +@shortcut() +export class DynamicYearTrigger extends Trigger { + static xtype = "bi.dynamic_year_trigger"; + + _const = { hgap: 4, vgap: 2, iconWidth: 24 }; + + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_START = "EVENT_START"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_VALID = "EVENT_VALID"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-year-trigger", min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 height: 24, - watermark: BI.i18nText("BI-Basic_Unrestricted") + watermark: i18nText("BI-Basic_Unrestricted"), }); - }, + } - beforeInit: function (callback) { - var o = this.options; - o.title = BI.bind(this._titleCreator, this); + beforeInit(callback) { + const o = this.options; + o.title = bind(this._titleCreator, this); callback(); - }, + } - _init: function () { - BI.DynamicYearTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this._const; - this.editor = BI.createWidget({ - type: "bi.sign_editor", + _init() { + super._init(...arguments); + const o = this.options, + c = this._const; + this.editor = createWidget({ + type: SignEditor.xtype, simple: o.simple, height: o.height, - validationChecker: function (v) { - return v === "" || (BI.isPositiveInteger(v) && !BI.checkDateVoid(v, 1, 1, o.min, o.max)[0]); - }, - quitChecker: function (v) { - return false; - }, + validationChecker: v => ( + v === "" || + (isPositiveInteger(v) && + !checkDateVoid(v, 1, 1, o.min, o.max)[0]) + ), + quitChecker: () => false, hgap: c.hgap, vgap: c.vgap, watermark: o.watermark, allowBlank: true, - errorText: function (v) { - if (BI.isPositiveInteger(v)) { - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); + errorText:v => { + if (isPositiveInteger(v)) { + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); - return BI.i18nText("BI-Basic_Year_Range_Error", + return i18nText( + "BI-Basic_Year_Range_Error", start.getFullYear(), - end.getFullYear()); + end.getFullYear() + ); } - return BI.i18nText("BI-Year_Trigger_Invalid_Text"); + return i18nText("BI-Year_Trigger_Invalid_Text"); }, }); - this.editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { - self.fireEvent(BI.DynamicYearTrigger.EVENT_KEY_DOWN, arguments); + this.editor.on(SignEditor.EVENT_KEY_DOWN, () => { + this.fireEvent(DynamicYearTrigger.EVENT_KEY_DOWN, ...arguments); }); - this.editor.on(BI.SignEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.DynamicYearTrigger.EVENT_FOCUS); + this.editor.on(SignEditor.EVENT_FOCUS, () => { + this.fireEvent(DynamicYearTrigger.EVENT_FOCUS); }); - this.editor.on(BI.SignEditor.EVENT_STOP, function () { - self.fireEvent(BI.DynamicYearTrigger.EVENT_STOP); + this.editor.on(SignEditor.EVENT_STOP, () => { + this.fireEvent(DynamicYearTrigger.EVENT_STOP); }); - this.editor.on(BI.SignEditor.EVENT_CONFIRM, function () { - var value = self.editor.getValue(); - if (BI.isNotNull(value)) { - self.editor.setValue(value); + this.editor.on(SignEditor.EVENT_CONFIRM, () => { + const value = this.editor.getValue(); + if (isNotNull(value)) { + this.editor.setValue(value); } - if (BI.isNotEmptyString(value)) { - self.storeValue = { - type: BI.DynamicDateCombo.Static, + if (isNotEmptyString(value)) { + this.storeValue = { + type: DynamicDateCombo.Static, value: { - year: value - } + year: value, + }, }; } - self.fireEvent(BI.DynamicYearTrigger.EVENT_CONFIRM); + this.fireEvent(DynamicYearTrigger.EVENT_CONFIRM); }); - this.editor.on(BI.SignEditor.EVENT_SPACE, function () { - if (self.editor.isValid()) { - self.editor.blur(); + this.editor.on(SignEditor.EVENT_SPACE, () => { + if (this.editor.isValid()) { + this.editor.blur(); } }); - this.editor.on(BI.SignEditor.EVENT_START, function () { - self.fireEvent(BI.DynamicYearTrigger.EVENT_START); + this.editor.on(SignEditor.EVENT_START, () => { + this.fireEvent(DynamicYearTrigger.EVENT_START); }); - this.editor.on(BI.SignEditor.EVENT_ERROR, function () { - self.fireEvent(BI.DynamicYearTrigger.EVENT_ERROR); + this.editor.on(SignEditor.EVENT_ERROR, () => { + this.fireEvent(DynamicYearTrigger.EVENT_ERROR); }); - this.editor.on(BI.SignEditor.EVENT_VALID, function () { - self.fireEvent(BI.DynamicYearTrigger.EVENT_VALID); + this.editor.on(SignEditor.EVENT_VALID, () => { + this.fireEvent(DynamicYearTrigger.EVENT_VALID); }); - BI.createWidget({ + createWidget({ element: this, - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["fill", "", ""], - items: [{ - el: this.editor - }, { - el: { - type: "bi.text_button", - baseCls: "bi-trigger-year-text", - text: BI.i18nText("BI-Multi_Date_Year"), + items: [ + { + el: this.editor, + }, + { + el: { + type: TextButton.xtype, + baseCls: "bi-trigger-year-text", + text: i18nText("BI-Multi_Date_Year"), + }, }, - }, { - el: { - type: "bi.trigger_icon_button", - width: this._const.iconWidth + { + el: { + type: TriggerIconButton.xtype, + width: this._const.iconWidth, + }, } - }] + ], }); this.setValue(o.value); - }, + } - _getText: function (obj) { - var value = ""; - if(BI.isNotNull(obj.year) && BI.parseInt(obj.year) !== 0) { - value += Math.abs(obj.year) + BI.i18nText("BI-Basic_Year") + (obj.year < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + _getText(obj) { + let value = ""; + if (isNotNull(obj.year) && parseInt(obj.year) !== 0) { + value += + Math.abs(obj.year) + + i18nText("BI-Basic_Year") + + (obj.year < 0 + ? i18nText("BI-Basic_Front") + : i18nText("BI-Basic_Behind")); } + return value; - }, + } - _setInnerValue: function (date, text) { - var dateStr = BI.print(date, "%Y"); + _setInnerValue(date) { + const dateStr = print(date, "%Y"); this.editor.setState(dateStr); this.editor.setValue(dateStr); - }, + } - _titleCreator: function () { - var storeValue = this.storeValue || {}; - var type = storeValue.type || BI.DynamicDateCombo.Static; - var value = storeValue.value; - if(!this.editor.isValid()) { + _titleCreator() { + const storeValue = this.storeValue || {}; + const type = storeValue.type || DynamicDateCombo.Static; + let value = storeValue.value; + if (!this.editor.isValid()) { return ""; } + switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = this._getText(value); - var date = BI.getDate(); - date = BI.DynamicDateHelper.getCalculation(value); - var dateStr = BI.print(date, "%Y"); - return BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr); - case BI.DynamicDateCombo.Static: - default: - value = value || {}; - return value.year; + case DynamicDateCombo.Dynamic: { + const text = this._getText(value); + let date = getDate(); + date = DynamicDateHelper.getCalculation(value); + const dateStr = BI.print(date, "%Y"); + + return BI.isEmptyString(text) ? dateStr : (`${text}:${dateStr}`); + } + + case DynamicDateCombo.Static: + default: + value = value || {}; + + return value.year; } - }, + } - setValue: function (v) { - var type, value; - var date = BI.getDate(); + setValue(v) { + let type, value; + let date = getDate(); this.storeValue = v; - if (BI.isNotNull(v)) { - type = v.type || BI.DynamicDateCombo.Static; + if (isNotNull(v)) { + type = v.type || DynamicDateCombo.Static; value = v.value || v; } switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = this._getText(value); - date = BI.DynamicDateHelper.getCalculation(value); - this._setInnerValue(date, text); - break; - case BI.DynamicDateCombo.Static: - default: - value = value || {}; - this.editor.setState(value.year); - this.editor.setValue(value.year); - break; + case DynamicDateCombo.Dynamic: { + const text = this._getText(value); + date = DynamicDateHelper.getCalculation(value); + this._setInnerValue(date, text); + break; + } + case DynamicDateCombo.Static: + default: + value = value || {}; + this.editor.setState(value.year); + this.editor.setValue(value.year); + break; } - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; } - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, + } - getKey: function () { + getKey() { return this.editor.getValue() | 0; - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); -BI.DynamicYearTrigger.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.DynamicYearTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DynamicYearTrigger.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicYearTrigger.EVENT_START = "EVENT_START"; -BI.DynamicYearTrigger.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicYearTrigger.EVENT_STOP = "EVENT_STOP"; -BI.DynamicYearTrigger.EVENT_VALID = "EVENT_VALID"; -BI.shortcut("bi.dynamic_year_trigger", BI.DynamicYearTrigger); \ No newline at end of file +} diff --git a/src/widget/yearinterval/yearinterval.js b/src/widget/yearinterval/yearinterval.js index 56756e60c..952c655d4 100644 --- a/src/widget/yearinterval/yearinterval.js +++ b/src/widget/yearinterval/yearinterval.js @@ -1,194 +1,232 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2021/1/25 - */ -BI.YearInterval = BI.inherit(BI.Single, { - constants: { +import { shortcut, HorizontalFillLayout, createWidget, i18nText, print, parseDateTime, checkDateVoid, isNotNull, checkDateLegal } from "@/core"; +import { Single, Label, Bubbles } from "@/base"; +import { DynamicYearCombo } from "../year"; + +@shortcut() +export class YearInterval extends Single { + static xtype = "bi.year_interval"; + + constants = { height: 24, width: 25, lgap: 15, offset: -15, - timeErrorCls: "time-error" - }, - - props: { + timeErrorCls: "time-error", + }; + props = { extraCls: "bi-year-interval", minDate: "1900-01-01", maxDate: "2099-12-31", supportDynamic: true, - }, + }; + + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - 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); return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["fill", "", "fill"], - items: [{ - el: self.left - }, { - el: { - type: "bi.label", - height: o.height, - hgap: 5, - text: "-", - ref: function (_ref) { - self.label = _ref; - } + items: [ + { + el: this.left, + }, + { + el: { + type: Label.xtype, + height: o.height, + hgap: 5, + text: "-", + ref: _ref => { + this.label = _ref; + }, + }, + }, + { + el: this.right, } - }, { - el: self.right - }] + ], }; - }, + } - _createCombo: function (v, watermark) { - var self = this, o = this.options; - var combo = BI.createWidget({ - type: "bi.dynamic_year_combo", + _createCombo(v, watermark) { + const o = this.options; + const combo = createWidget({ + type: DynamicYearCombo.xtype, supportDynamic: o.supportDynamic, minDate: o.minDate, maxDate: o.maxDate, height: o.height, behaviors: o.behaviors, value: v, - watermark: watermark, - listeners: [{ - eventName: BI.DynamicYearCombo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.YearInterval.EVENT_BEFORE_POPUPVIEW); + watermark, + listeners: [ + { + eventName: DynamicYearCombo.EVENT_BEFORE_POPUPVIEW, + action: () => { + this.fireEvent(YearInterval.EVENT_BEFORE_POPUPVIEW); + }, } - }] + ], }); - combo.on(BI.DynamicYearCombo.EVENT_ERROR, function () { - self._clearTitle(); - BI.Bubbles.hide("error"); - self.element.removeClass(self.constants.timeErrorCls); - self.fireEvent(BI.YearInterval.EVENT_ERROR); + combo.on(DynamicYearCombo.EVENT_ERROR, () => { + this._clearTitle(); + Bubbles.hide("error"); + this.element.removeClass(this.constants.timeErrorCls); + this.fireEvent(YearInterval.EVENT_ERROR); }); - combo.on(BI.DynamicYearCombo.EVENT_VALID, function () { - self._checkValid(); + combo.on(DynamicYearCombo.EVENT_VALID, () => { + this._checkValid(); }); - combo.on(BI.DynamicYearCombo.EVENT_FOCUS, function () { - self._checkValid(); + combo.on(DynamicYearCombo.EVENT_FOCUS, () => { + this._checkValid(); }); - combo.on(BI.DynamicYearCombo.EVENT_CONFIRM, function () { - BI.Bubbles.hide("error"); - var smallDate = self.left.getKey(), bigDate = self.right.getKey(); - if (self.left.isStateValid() && self.right.isStateValid() && 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.YearInterval.EVENT_ERROR); - }else{ - self._clearTitle(); - self.element.removeClass(self.constants.timeErrorCls); - self.fireEvent(BI.YearInterval.EVENT_CHANGE); + combo.on(DynamicYearCombo.EVENT_CONFIRM, () => { + Bubbles.hide("error"); + const smallDate = this.left.getKey(), + bigDate = this.right.getKey(); + if ( + this.left.isStateValid() && + this.right.isStateValid() && + this._check(smallDate, bigDate) && + this._compare(smallDate, bigDate) + ) { + this._setTitle(i18nText("BI-Time_Interval_Error_Text")); + this.element.addClass(this.constants.timeErrorCls); + this.fireEvent(YearInterval.EVENT_ERROR); + } else { + this._clearTitle(); + this.element.removeClass(this.constants.timeErrorCls); + this.fireEvent(YearInterval.EVENT_CHANGE); } }); + return combo; - }, - - - _dateCheck: function (date) { - return BI.print(BI.parseDateTime(date, "%Y"), "%Y") === date || BI.print(BI.parseDateTime(date, "%Y"), "%Y") === date; - }, + } + _dateCheck(date) { + return ( + print(parseDateTime(date, "%Y"), "%Y") === date || + print(parseDateTime(date, "%Y"), "%Y") === date + ); + } - // 判是否在最大最小之间 - _checkVoid: function (obj) { - var o = this.options; - return !BI.checkDateVoid(obj.year, 1, 1, o.minDate, o.maxDate)[0]; - }, + _checkVoid(obj) { + const o = this.options; + + return !checkDateVoid(obj.year, 1, 1, o.minDate, o.maxDate)[0]; + } - // 判格式合法 - _check: function (smallDate, bigDate) { - var smallObj = smallDate.match(/\d+/g), bigObj = bigDate.match(/\d+/g); + _check(smallDate, bigDate) { + const smallObj = smallDate.match(/\d+/g), + bigObj = bigDate.match(/\d+/g); - var smallDate4Check = ""; - if (BI.isNotNull(smallObj)) { + let smallDate4Check = ""; + if (isNotNull(smallObj)) { smallDate4Check = smallObj[0] || ""; } - var bigDate4Check = ""; - if (BI.isNotNull(bigObj)) { + let bigDate4Check = ""; + if (isNotNull(bigObj)) { bigDate4Check = bigObj[0] || ""; } - return this._dateCheck(smallDate4Check) && BI.checkDateLegal(smallDate4Check) && this._checkVoid({ - year: smallObj[0], - month: 1, - day: 1 - }) && this._dateCheck(bigDate4Check) && BI.checkDateLegal(bigDate4Check) && this._checkVoid({ - year: bigObj[0], - month: 12, - day: 1 - }); - }, - - _compare: function (smallDate, bigDate) { - smallDate = BI.print(BI.parseDateTime(smallDate, "%Y"), "%Y"); - bigDate = BI.print(BI.parseDateTime(bigDate, "%Y"), "%Y"); - return BI.isNotNull(smallDate) && BI.isNotNull(bigDate) && smallDate > bigDate; - }, - _setTitle: function (v) { + return ( + this._dateCheck(smallDate4Check) && + checkDateLegal(smallDate4Check) && + this._checkVoid({ + year: smallObj[0], + month: 1, + day: 1, + }) && + this._dateCheck(bigDate4Check) && + checkDateLegal(bigDate4Check) && + this._checkVoid({ + year: bigObj[0], + month: 12, + day: 1, + }) + ); + } + + _compare(smallDate, bigDate) { + smallDate = print(parseDateTime(smallDate, "%Y"), "%Y"); + bigDate = print(parseDateTime(bigDate, "%Y"), "%Y"); + + return ( + isNotNull(smallDate) && isNotNull(bigDate) && smallDate > bigDate + ); + } + + _setTitle(v) { this.setTitle(v); - }, - _clearTitle: function () { + } + + _clearTitle() { this.setTitle(""); - }, - _checkValid: function () { - var self = this; - - 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" - }); - self.fireEvent(BI.YearInterval.EVENT_ERROR); + } + + _checkValid() { + 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", + } + ); + this.fireEvent(YearInterval.EVENT_ERROR); } else { - self._clearTitle(); - self.element.removeClass(self.constants.timeErrorCls); + this._clearTitle(); + this.element.removeClass(this.constants.timeErrorCls); } - }, + } - 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); this._checkValid(); - }, - getValue: function () { - return {start: this.left.getValue(), end: this.right.getValue()}; } -}); -BI.YearInterval.EVENT_VALID = "EVENT_VALID"; -BI.YearInterval.EVENT_ERROR = "EVENT_ERROR"; -BI.YearInterval.EVENT_CHANGE = "EVENT_CHANGE"; -BI.YearInterval.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.year_interval", BI.YearInterval); + + getValue() { + return { start: this.left.getValue(), end: this.right.getValue() }; + } +}