From 6b1aeb6d9f49def0d7c773be77f926e1efc61d17 Mon Sep 17 00:00:00 2001 From: "crawford.zhou" Date: Thu, 12 Jan 2023 19:16:54 +0800 Subject: [PATCH 1/3] =?UTF-8?q?KERNEL-14067=20feat:year=20&&=20yearInterva?= =?UTF-8?q?l=20=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() }; + } +} From f32af40f0f1b1020127eaee7eb4013f1237cfd7e Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Thu, 12 Jan 2023 20:06:01 +0800 Subject: [PATCH 2/3] KERNEL-14101 refactor: widget/singleselect --- src/widget/index.js | 3 + src/widget/multiselect/index.js | 1 + src/widget/singleselect/index.js | 9 + src/widget/singleselect/search/index.js | 3 + .../search/singleselect.search.loader.js | 181 +++++----- .../search/singleselect.search.pane.insert.js | 124 +++---- .../search/singleselect.search.pane.js | 130 +++---- src/widget/singleselect/singleselect.combo.js | 321 +++++++++--------- .../singleselect/singleselect.insert.combo.js | 260 +++++++------- src/widget/singleselect/singleselect.list.js | 226 ++++++------ .../singleselect/singleselect.loader.js | 239 ++++++------- .../singleselect/singleselect.popup.view.js | 88 +++-- .../singleselect/singleselect.trigger.js | 174 +++++----- .../singleselect/singleselectlist.insert.js | 266 ++++++++------- .../trigger/editor.singleselect.js | 102 +++--- src/widget/singleselect/trigger/index.js | 2 + .../trigger/searcher.singleselect.js | 189 +++++------ 17 files changed, 1204 insertions(+), 1114 deletions(-) create mode 100644 src/widget/singleselect/index.js create mode 100644 src/widget/singleselect/search/index.js create mode 100644 src/widget/singleselect/trigger/index.js diff --git a/src/widget/index.js b/src/widget/index.js index 874fd77cd..84e8b6e4f 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -19,6 +19,7 @@ import { NumberEditor } from "./numbereditor/number.editor"; import { NumberInterval } from "./numberinterval/numberinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; +import * as singleselect from "./singleselect"; Object.assign(BI, { Collapse, @@ -42,6 +43,7 @@ Object.assign(BI, { NumberInterval, ...multiselect, ...multiselectlist, + ...singleselect, }); export * from "./date/calendar"; @@ -57,6 +59,7 @@ export * from "./multiselectlist"; export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; +export * from "./singleselect"; export { Collapse, diff --git a/src/widget/multiselect/index.js b/src/widget/multiselect/index.js index 9d15e06a0..9e0934c14 100644 --- a/src/widget/multiselect/index.js +++ b/src/widget/multiselect/index.js @@ -2,3 +2,4 @@ export { MultiSelectCombo } from "./multiselect.combo"; export { MultiSelectNoBarCombo } from "./multiselect.combo.nobar"; export { MultiSelectInsertCombo } from "./multiselect.insert.combo"; export { MultiSelectInsertNoBarCombo } from "./multiselect.insert.combo.nobar"; +export { SelectPatchEditor } from "./trigger/editor/editor.patch"; diff --git a/src/widget/singleselect/index.js b/src/widget/singleselect/index.js new file mode 100644 index 000000000..7e3f4cd04 --- /dev/null +++ b/src/widget/singleselect/index.js @@ -0,0 +1,9 @@ +export { SingleSelectCombo } from "./singleselect.combo"; +export { SingleSelectInsertCombo } from "./singleselect.insert.combo"; +export { SingleSelectList } from "./singleselect.list"; +export { SingleSelectLoader } from "./singleselect.loader"; +export { SingleSelectPopupView } from "./singleselect.popup.view"; +export { SingleSelectTrigger } from "./singleselect.trigger"; +export { SingleSelectInsertList } from "./singleselectlist.insert"; +export * from "./trigger"; +export * from "./search"; diff --git a/src/widget/singleselect/search/index.js b/src/widget/singleselect/search/index.js new file mode 100644 index 000000000..70c02c573 --- /dev/null +++ b/src/widget/singleselect/search/index.js @@ -0,0 +1,3 @@ +export { SingleSelectSearchLoader } from "./singleselect.search.loader"; +export { SingleSelectSearchPane } from "./singleselect.search.pane"; +export { SingleSelectSearchInsertPane } from "./singleselect.search.pane.insert"; diff --git a/src/widget/singleselect/search/singleselect.search.loader.js b/src/widget/singleselect/search/singleselect.search.loader.js index 5625593dd..56ab10f3c 100644 --- a/src/widget/singleselect/search/singleselect.search.loader.js +++ b/src/widget/singleselect/search/singleselect.search.loader.js @@ -1,73 +1,80 @@ -/** - * 单选加载数据搜索loader面板 - * Created by guy on 15/11/4. - * @class BI.SingleSelectSearchLoader - * @extends Widget - */ -BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText, isUndefined, Controller, VerticalLayout, map, isArray, isKey, Func } from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SingleSelectList } from "../singleselect.list"; +import { SingleSelectItem, SingleSelectRadioItem } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearchLoader.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectSearchLoader extends Widget { + static xtype = "bi.single_select_search_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-search-loader", allowNoSelect: false, logic: { - dynamic: false + dynamic: false, }, - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - valueFormatter: BI.emptyFn + itemsCreator: emptyFn, + keywordGetter: emptyFn, + valueFormatter: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectSearchLoader.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; - var hasNext = false; + const self = this, + opts = this.options; + let hasNext = false; - this.button_group = BI.createWidget({ - type: "bi.single_select_list", + this.button_group = createWidget({ + type: SingleSelectList.xtype, allowNoSelect: opts.allowNoSelect, element: this, logic: { - dynamic: false + dynamic: false, }, value: opts.value, el: { - tipText: BI.i18nText("BI-No_Select"), + tipText: i18nText("BI-No_Select"), el: { - type: "bi.loader", + type: Loader.xtype, isDefaultInit: false, logic: { dynamic: true, - scrolly: true + scrolly: true, }, el: { - chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, + chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, behaviors: { - redmark: function () { + redmark () { return true; - } + }, }, - layouts: [{ - type: "bi.vertical" - }] - } - } + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + }, }, - itemsCreator: function (op, callback) { - self.storeValue && (op = BI.extend(op || {}, { - selectedValues: [self.storeValue] - })); - opts.itemsCreator(op, function (ob) { - var keyword = ob.keyword = opts.keywordGetter(); + itemsCreator (op, callback) { + self.storeValue && + (op = extend(op || {}, { + selectedValues: [self.storeValue], + })); + opts.itemsCreator(op, ob => { + const keyword = (ob.keyword = opts.keywordGetter()); hasNext = ob.hasNext; - var firstItems = []; - if (op.times === 1 && !BI.isUndefined(self.storeValue)) { - var json = self._filterValues(self.storeValue); + let firstItems = []; + if (op.times === 1 && !isUndefined(self.storeValue)) { + const json = self._filterValues(self.storeValue); firstItems = self._createItems(json); } - var context = { + const context = { tipText: ob.tipText, }; callback(firstItems.concat(self._createItems(ob.items)), keyword || "", context); @@ -76,88 +83,88 @@ BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, { } }); }, - hasNext: function () { + hasNext () { return hasNext; - } + }, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.button_group.on(BI.SingleSelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectSearchLoader.EVENT_CHANGE, arguments); + this.button_group.on(SingleSelectList.EVENT_CHANGE, function () { + self.fireEvent(SingleSelectSearchLoader.EVENT_CHANGE, arguments); }); - }, + } - _createItems: function (items) { - var o = this.options; - return BI.map(items, function (i, item) { - return BI.extend({ - type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item", + _createItems(items) { + const o = this.options; + + return map(items, (i, item) => extend( + { + type: o.allowNoSelect ? SingleSelectItem.xtype : SingleSelectRadioItem.xtype, logic: o.logic, cls: "bi-list-item-active", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, selected: false, iconWrapperWidth: 26, hgap: o.allowNoSelect ? 10 : 0, - title: item.title || item.text - }, item); - }); - }, + title: item.title || item.text, + }, + item + )); + } - _filterValues: function (src) { - var o = this.options; - var keyword = o.keywordGetter(); - var values = src || []; - var newValues = BI.map(BI.isArray(values) ? values : [values], function (i, v) { + _filterValues(src) { + const o = this.options; + const keyword = o.keywordGetter(); + let values = src || []; + const newValues = map(isArray(values) ? values : [values], (i, v) => { return { text: o.valueFormatter(v) || v, - value: v + value: v, }; }); - if (BI.isKey(keyword)) { - var search = BI.Func.getSearchResult(newValues, keyword); + if (isKey(keyword)) { + const search = Func.getSearchResult(newValues, keyword); values = search.match.concat(search.find); } - return BI.map(values, function (i, v) { + + return map(values, (i, v) => { return { text: v.text, title: v.text, value: v.value, - selected: false + selected: false, }; }); - }, + } - setValue: function (v) { + setValue(v) { // 暂存的值一定是新的值，不然v改掉后，storeValue也跟着改了 this.storeValue = v; this.button_group.setValue(v); - }, + } - getValue: function () { + getValue() { return this.button_group.getValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - empty: function () { + empty() { this.button_group.empty(); - }, + } - populate: function (items) { - this.button_group.populate.apply(this.button_group, arguments); - }, + populate(items) { + this.button_group.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.button_group.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.button_group.resetWidth(w); } -}); - -BI.SingleSelectSearchLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_search_loader", BI.SingleSelectSearchLoader); +} diff --git a/src/widget/singleselect/search/singleselect.search.pane.insert.js b/src/widget/singleselect/search/singleselect.search.pane.insert.js index 6c1e49af2..5c7ca6e5d 100644 --- a/src/widget/singleselect/search/singleselect.search.pane.insert.js +++ b/src/widget/singleselect/search/singleselect.search.pane.insert.js @@ -1,96 +1,96 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.SingleSelectSearchInsertPane - * @extends Widget - */ +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText, Controller, VerticalFillLayout, VerticalLayout } from "@/core"; +import { Label } from "@/base"; +import { SingleSelectSearchLoader } from "./singleselect.search.loader"; -BI.SingleSelectSearchInsertPane = BI.inherit(BI.Widget, { +@shortcut() +export class SingleSelectSearchInsertPane extends Widget { + static xtype = "bi.single_select_search_insert_pane"; - constants: { - height: 25, - lgap: 10, - tgap: 5 - }, + constants = { height: 25, lgap: 10, tgap: 5 }; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearchInsertPane.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-search-pane-insert bi-card", allowNoSelect: false, - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, - keywordGetter: BI.emptyFn + itemsCreator: emptyFn, + valueFormatter: emptyFn, + keywordGetter: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectSearchInsertPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.addNotMatchTip = BI.createWidget({ - type: "bi.label", - text: BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), + this.addNotMatchTip = createWidget({ + type: Label.xtype, + text: i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), height: this.constants.height, cls: "bi-keyword-red-mark", hgap: 5, }); - this.loader = BI.createWidget({ - type: "bi.single_select_search_loader", + this.loader = createWidget({ + type: SingleSelectSearchLoader.xtype, allowNoSelect: o.allowNoSelect, keywordGetter: o.keywordGetter, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - o.itemsCreator.apply(self, [op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }]); + itemsCreator (op, callback) { + o.itemsCreator.apply(self, [ + op, + function (res) { + callback(res); + self.setKeyword(o.keywordGetter()); + } + ]); }, - value: o.value + value: o.value, }); - this.loader.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.loader.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.resizer = BI.createWidget({ - type: "bi.vertical_fill", + this.resizer = createWidget({ + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], element: this, - items: [{ - type: "bi.vertical", - items: [this.addNotMatchTip], - height: this.constants.height - }, { - el: this.loader - }] + items: [ + { + type: VerticalLayout.xtype, + items: [this.addNotMatchTip], + height: this.constants.height, + }, + { + el: this.loader, + } + ], }); - }, + } - setKeyword: function (keyword) { - this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)); - }, + setKeyword(keyword) { + this.addNotMatchTip.setText(i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)); + } - hasMatched: function () { + hasMatched() { return false; - }, + } - setValue: function (v) { + setValue(v) { this.loader.setValue(v); - }, + } - getValue: function () { + getValue() { return this.loader.getValue(); - }, + } - empty: function () { + empty() { this.loader.empty(); - }, - - populate: function (items) { - this.loader.populate.apply(this.loader, arguments); } -}); -BI.SingleSelectSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.single_select_search_insert_pane", BI.SingleSelectSearchInsertPane); + populate(items) { + this.loader.populate(...arguments); + } +} diff --git a/src/widget/singleselect/search/singleselect.search.pane.js b/src/widget/singleselect/search/singleselect.search.pane.js index ea923c5f6..d11421f34 100644 --- a/src/widget/singleselect/search/singleselect.search.pane.js +++ b/src/widget/singleselect/search/singleselect.search.pane.js @@ -1,101 +1,105 @@ -/** - * - * 在搜索框中输入文本弹出的面板 - * @class BI.SingleSelectSearchPane - * @extends Widget - */ +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText, Controller, VerticalFillLayout } from "@/core"; +import { Label } from "@/base"; +import { SingleSelectSearchLoader } from "./singleselect.search.loader"; -BI.SingleSelectSearchPane = BI.inherit(BI.Widget, { +@shortcut() +export class SingleSelectSearchPane extends Widget { + static xtype = "bi.single_select_search_pane"; - constants: { - height: 25, - lgap: 10, - tgap: 5 - }, + constants = { height: 25, lgap: 10, tgap: 5 }; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearchPane.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-search-pane bi-card", allowNoSelect: false, - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, - keywordGetter: BI.emptyFn + itemsCreator: emptyFn, + valueFormatter: emptyFn, + keywordGetter: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectSearchPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.tooltipClick = BI.createWidget({ - type: "bi.label", + this.tooltipClick = createWidget({ + type: Label.xtype, invisible: true, - text: BI.i18nText("BI-Click_Blank_To_Select"), + text: i18nText("BI-Click_Blank_To_Select"), cls: "single-select-toolbar", - height: this.constants.height + height: this.constants.height, }); - this.loader = BI.createWidget({ - type: "bi.single_select_search_loader", + this.loader = createWidget({ + type: SingleSelectSearchLoader.xtype, allowNoSelect: o.allowNoSelect, keywordGetter: o.keywordGetter, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - o.itemsCreator.apply(self, [op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }]); + itemsCreator (op, callback) { + o.itemsCreator.apply(self, [ + op, + function (res) { + callback(res); + self.setKeyword(o.keywordGetter()); + } + ]); }, - value: o.value + value: o.value, }); - this.loader.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.loader.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.resizer = BI.createWidget({ - type: "bi.vertical_fill", + this.resizer = createWidget({ + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], element: this, - items: [{ - el: this.tooltipClick, - }, { - el: this.loader - }] + items: [ + { + el: this.tooltipClick, + }, + { + el: this.loader, + } + ], }); this.tooltipClick.setVisible(false); - }, + } - setKeyword: function (keyword) { - var btn, o = this.options; - var isVisible = this.loader.getAllButtons().length > 0 && (btn = this.loader.getAllButtons()[0]) && (keyword === (o.valueFormatter(btn.getValue()) || btn.getValue())); + setKeyword(keyword) { + let btn; + const o = this.options; + const isVisible = + this.loader.getAllButtons().length > 0 && + (btn = this.loader.getAllButtons()[0]) && + keyword === (o.valueFormatter(btn.getValue()) || btn.getValue()); if (isVisible !== this.tooltipClick.isVisible()) { this.tooltipClick.setVisible(isVisible); - this.resizer.attr("items")[0].height = (isVisible ? this.constants.height : 0); + this.resizer.attr("items")[0].height = isVisible ? this.constants.height : 0; this.resizer.resize(); } - }, + } - hasMatched: function () { + hasMatched() { return this.tooltipClick.isVisible(); - }, + } - setValue: function (v) { + setValue(v) { this.loader.setValue(v); - }, + } - getValue: function () { + getValue() { return this.loader.getValue(); - }, + } - empty: function () { + empty() { this.loader.empty(); - }, - - populate: function (items) { - this.loader.populate.apply(this.loader, arguments); } -}); -BI.SingleSelectSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.single_select_search_pane", BI.SingleSelectSearchPane); + populate(items) { + this.loader.populate(...arguments); + } +} diff --git a/src/widget/singleselect/singleselect.combo.js b/src/widget/singleselect/singleselect.combo.js index cc4d7c261..2d1d2b013 100644 --- a/src/widget/singleselect/singleselect.combo.js +++ b/src/widget/singleselect/singleselect.combo.js @@ -1,89 +1,104 @@ -/** - * - * @class BI.SingleSelectCombo - * @extends BI.Single - */ -BI.SingleSelectCombo = BI.inherit(BI.Single, { +import { shortcut, extend, emptyFn, isKey, createWidget, toPix, isNotNull, nextTick, AbsoluteLayout, makeObject, map, each, remove } from "@/core"; +import { Single, Combo } from "@/base"; +import { SingleSelectTrigger } from "./singleselect.trigger"; +import { SingleSelectPopupView } from "./singleselect.popup.view"; +import { TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectCombo extends Single { + static xtype = "bi.single_select_combo"; + + static REQ_GET_DATA_LENGTH = 0; + static REQ_GET_ALL_DATA = -1; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-combo", allowNoSelect: false, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + valueFormatter: emptyFn, height: 24, - allowEdit: true + allowEdit: true, }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SingleSelectCombo.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue = self._startValue); - self.trigger.getSearcher().setState(self.storeValue); + const assertShowValue = () => { + isKey(this._startValue) && (this.storeValue = this._startValue); + this.trigger.getSearcher().setState(this.storeValue); }; this.storeValue = o.value; // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.single_select_trigger", - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), // adapter: this.popup, allowNoSelect: o.allowNoSelect, allowEdit: o.allowEdit, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - o.itemsCreator(op, function (res) { - if (op.times === 1 && BI.isNotNull(op.keywords)) { + itemsCreator: (op, callback) => { + o.itemsCreator(op, (...args) => { + if (op.times === 1 && isNotNull(op.keywords)) { // 预防trigger内部把当前的storeValue改掉 - self.trigger.setValue(self.getValue()); + this.trigger.setValue(this.getValue()); } - callback.apply(self, arguments); + callback.apply(this, ...args); }); }, text: o.text, - value: this.storeValue + value: this.storeValue, }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectCombo.EVENT_FOCUS); + this.trigger.on(SingleSelectTrigger.EVENT_FOCUS, () => { + this.fireEvent(SingleSelectCombo.EVENT_FOCUS); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectCombo.EVENT_BLUR); + this.trigger.on(SingleSelectTrigger.EVENT_BLUR, () => { + this.fireEvent(SingleSelectCombo.EVENT_BLUR); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_START, function () { - self._setStartValue(); - this.getSearcher().setValue(self.storeValue); + this.trigger.on(SingleSelectTrigger.EVENT_START, () => { + this._setStartValue(); + this.getSearcher().setValue(this.storeValue); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_STOP, function () { - self._setStartValue(); - self.fireEvent(BI.SingleSelectCombo.EVENT_STOP); + this.trigger.on(SingleSelectTrigger.EVENT_STOP, () => { + this._setStartValue(); + this.fireEvent(SingleSelectCombo.EVENT_STOP); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_SEARCHING, function () { - self._dataChange = true; - self.fireEvent(BI.SingleSelectCombo.EVENT_SEARCHING); + this.trigger.on(SingleSelectTrigger.EVENT_SEARCHING, () => { + this._dataChange = true; + this.fireEvent(SingleSelectCombo.EVENT_SEARCHING); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_CHANGE, function (value, obj) { - self.storeValue = this.getValue(); - assertShowValue(); - self._defaultState(); - self._dataChange = true; - }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_COUNTER_CLICK, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.trigger.on( + SingleSelectTrigger.EVENT_CHANGE, + (value, obj) => { + this.storeValue = this.trigger.getValue(); + assertShowValue(); + this._defaultState(); + this._dataChange = true; + } + ); + this.trigger.on(SingleSelectTrigger.EVENT_COUNTER_CLICK, () => { + if (!this.combo.isViewVisible()) { + this.combo.showView(); } }); - this.combo = BI.createWidget({ - type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + this.combo = createWidget({ + type: Combo.xtype, + cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", container: o.container, toggle: false, el: this.trigger, @@ -91,182 +106,174 @@ BI.SingleSelectCombo = BI.inherit(BI.Single, { popup: { type: "bi.single_select_popup_view", allowNoSelect: o.allowNoSelect, - ref: function () { - self.popup = this; - self.trigger.setAdapter(this); + ref: _ref => { + this.popup = _ref; + this.trigger.setAdapter(_ref); }, listeners: [{ - eventName: BI.SingleSelectPopupView.EVENT_CHANGE, - action: function () { - self._dataChange = true; - self.storeValue = this.getValue(); - self._adjust(function () { + eventName: SingleSelectPopupView.EVENT_CHANGE, + action: () => { + this._dataChange = true; + this.storeValue = this.popup.getValue(); + this._adjust(() => { assertShowValue(); - self._defaultState(); + this._defaultState(); }); - self.fireEvent(BI.SingleSelectCombo.EVENT_CLICK_ITEM); - } + this.fireEvent(SingleSelectCombo.EVENT_CLICK_ITEM); + }, }], itemsCreator: o.itemsCreator, itemWrapper: o.itemWrapper, valueFormatter: o.valueFormatter, - onLoaded: function () { - BI.nextTick(function () { - self.combo.adjustWidth(); - self.combo.adjustHeight(); - self.trigger.getSearcher().adjustView(); + onLoaded: () => { + nextTick(() => { + this.combo.adjustWidth(); + this.combo.adjustHeight(); + this.trigger.getSearcher().adjustView(); }); - } + }, }, - hideChecker: function (e) { + hideChecker(e) { return triggerBtn.element.find(e.target).length === 0; }, - value: o.value + value: o.value, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - if (!this.isViewVisible()) { - self._dataChange = false;// 标记数据是否发生变化 + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + if (!this.combo.isViewVisible()) { + this._dataChange = false; // 标记数据是否发生变化 } - this.setValue(self.storeValue); - BI.nextTick(function () { - self.populate(); + this.setValue(this.storeValue); + nextTick(() => { + this.populate(); }); }); // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件 this.wants2Quit = false; - this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => { // important:关闭弹出时又可能没有退出编辑状态 - self.trigger.stopEditing(); - if (self.requesting === true) { - self.wants2Quit = true; + this.trigger.stopEditing(); + if (this.requesting === true) { + this.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.SingleSelectCombo.EVENT_CONFIRM); + this._dataChange && + this.fireEvent(SingleSelectCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "single-select-trigger-icon-button" + cls: "single-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { - if (self.combo.isViewVisible()) { - self.combo.hideView(); + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { + if (this.combo.isViewVisible()) { + this.combo.hideView(); } else { - self.combo.showView(); + this.combo.showView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [{ el: this.combo, left: 0, right: 0, top: 0, - bottom: 0 - }, { + bottom: 0, + }, + { el: triggerBtn, right: 0, top: 0, - bottom: 0 - }] + bottom: 0, + } + ], }); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { - }, + _assertValue(val) {} - _makeMap: function (values) { - return BI.makeObject(values || []); - }, + _makeMap(values) { + return makeObject(values || []); + } - _joinKeywords: function (keywords, callback) { - var self = this, o = this.options; + _joinKeywords(keywords, callback) { + const o = this.options; this._assertValue(this.storeValue); this.requesting = true; o.itemsCreator({ - type: BI.SingleSelectCombo.REQ_GET_ALL_DATA, - keywords: keywords - }, function (ob) { - var values = BI.map(ob.items, "value"); + type: SingleSelectCombo.REQ_GET_ALL_DATA, + keywords, + }, + ob => { + const values = map(ob.items, "value"); digest(values); - }); + } + ); - function digest (items) { - var selectedMap = self._makeMap(items); - BI.each(keywords, function (i, val) { - if (BI.isNotNull(selectedMap[val])) { - BI.remove(self.storeValue.value, val); + const digest = items => { + const selectedMap = this._makeMap(items); + each(keywords, (i, val) => { + if (isNotNull(selectedMap[val])) { + remove(this.storeValue.value, val); } }); - self._adjust(callback); - } - }, + this._adjust(callback); + }; + } - _adjust: function (callback) { - var self = this, o = this.options; + _adjust(callback) { + const adjust = () => { + if (this.wants2Quit === true) { + this._dataChange && + this.fireEvent(SingleSelectCombo.EVENT_CONFIRM); + this.wants2Quit = false; + } + this.requesting = false; + }; + + const o = this.options; if (!this._count) { o.itemsCreator({ - type: BI.SingleSelectCombo.REQ_GET_DATA_LENGTH - }, function (res) { - self._count = res.count; + type: SingleSelectCombo.REQ_GET_DATA_LENGTH, + }, + res => { + this._count = res.count; adjust(); callback(); - }); + } + ); } else { adjust(); callback(); - } + } - function adjust () { - if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.SingleSelectCombo.EVENT_CONFIRM); - self.wants2Quit = false; - } - self.requesting = false; - } - }, - - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.popup.setStartValue(value); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, + } - populate: function () { + populate() { this._count = null; - this.combo.populate.apply(this.combo, arguments); + this.combo.populate(...arguments); } -}); - -BI.extend(BI.SingleSelectCombo, { - REQ_GET_DATA_LENGTH: 0, - REQ_GET_ALL_DATA: -1 -}); - -BI.SingleSelectCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.SingleSelectCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectCombo.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SingleSelectCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.SingleSelectCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - -BI.shortcut("bi.single_select_combo", BI.SingleSelectCombo); +} diff --git a/src/widget/singleselect/singleselect.insert.combo.js b/src/widget/singleselect/singleselect.insert.combo.js index a36bf0bd6..991735404 100644 --- a/src/widget/singleselect/singleselect.insert.combo.js +++ b/src/widget/singleselect/singleselect.insert.combo.js @@ -1,45 +1,58 @@ -/** - * - * @class BI.SingleSelectInsertCombo - * @extends BI.Single - */ -BI.SingleSelectInsertCombo = BI.inherit(BI.Single, { - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectInsertCombo.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, emptyFn, i18nText, isKey, createWidget, toPix, isNotNull, nextTick, AbsoluteLayout, makeObject } from "@/core"; +import { Single, Combo } from "@/base"; +import { SingleSelectTrigger } from "./singleselect.trigger"; +import { SingleSelectPopupView } from "./singleselect.popup.view"; +import { TriggerIconButton } from "@/case"; + +@shortcut() +export class SingleSelectInsertCombo extends Single { + static xtype = "bi.single_select_insert_combo"; + + static REQ_GET_DATA_LENGTH = 0; + static REQ_GET_ALL_DATA = -1; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-combo", allowNoSelect: false, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + valueFormatter: emptyFn, height: 24, allowEdit: true, - watermark: BI.i18nText("BI-Basic_Search_And_Patch_Paste"), + watermark: i18nText("BI-Basic_Search_And_Patch_Paste"), }); - }, - - _init: function () { - var self = this, o = this.options; - BI.SingleSelectInsertCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue = self._startValue); - self.trigger.getSearcher().setState(self.storeValue); + } + + _init() { + const self = this, + o = this.options; + super._init(...arguments); + const assertShowValue = () => { + isKey(this._startValue) && (this.storeValue = this._startValue); + this.trigger.getSearcher().setState(this.storeValue); }; this.storeValue = o.value; // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ - type: "bi.single_select_trigger", + this.trigger = createWidget({ + type: SingleSelectTrigger.xtype, watermark: o.watermark, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), allowNoSelect: o.allowNoSelect, allowEdit: o.allowEdit, // adapter: this.popup, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { + itemsCreator (op, callback) { o.itemsCreator(op, function (res) { - if (op.times === 1 && BI.isNotNull(op.keywords)) { + if (op.times === 1 && isNotNull(op.keywords)) { // 预防trigger内部把当前的storeValue改掉 self.trigger.setValue(self.getValue()); } @@ -51,198 +64,195 @@ BI.SingleSelectInsertCombo = BI.inherit(BI.Single, { searcher: { popup: { type: "bi.single_select_search_insert_pane", - } - } + }, + }, }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_FOCUS); + this.trigger.on(SingleSelectTrigger.EVENT_FOCUS, () => { + self.fireEvent(SingleSelectInsertCombo.EVENT_FOCUS); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_BLUR); + this.trigger.on(SingleSelectTrigger.EVENT_BLUR, () => { + self.fireEvent(SingleSelectInsertCombo.EVENT_BLUR); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_START, function () { + this.trigger.on(SingleSelectTrigger.EVENT_START, function () { self._setStartValue(); this.getSearcher().setValue(self.storeValue); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_STOP, function () { + this.trigger.on(SingleSelectTrigger.EVENT_STOP, () => { self._setStartValue(); - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_STOP); + self.fireEvent(SingleSelectInsertCombo.EVENT_STOP); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_PAUSE, function () { + this.trigger.on(SingleSelectTrigger.EVENT_PAUSE, () => { self.storeValue = self.trigger.getSearcher().getKeyword(); assertShowValue(); self._defaultState(); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_SEARCHING, function () { + this.trigger.on(SingleSelectTrigger.EVENT_SEARCHING, () => { self._dataChange = true; - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_SEARCHING); + self.fireEvent(SingleSelectInsertCombo.EVENT_SEARCHING); }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_CHANGE, function (value, obj) { - self.storeValue = this.getValue(); - assertShowValue(); - self._defaultState(); - self._dataChange = true; - }); - this.trigger.on(BI.SingleSelectTrigger.EVENT_COUNTER_CLICK, function () { + this.trigger.on( + SingleSelectTrigger.EVENT_CHANGE, + function (value, obj) { + self.storeValue = this.getValue(); + assertShowValue(); + self._defaultState(); + self._dataChange = true; + } + ); + this.trigger.on(SingleSelectTrigger.EVENT_COUNTER_CLICK, () => { if (!self.combo.isViewVisible()) { self.combo.showView(); } }); - this.combo = BI.createWidget({ - type: "bi.combo", - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + this.combo = createWidget({ + type: Combo.xtype, + cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", container: o.container, toggle: false, el: this.trigger, adjustLength: 1, popup: { - type: "bi.single_select_popup_view", + type: SingleSelectPopupView.xtype, allowNoSelect: o.allowNoSelect, - ref: function () { + ref () { self.popup = this; self.trigger.setAdapter(this); }, - listeners: [{ - eventName: BI.SingleSelectPopupView.EVENT_CHANGE, - action: function () { - self._dataChange = true; - self.storeValue = this.getValue(); - self._adjust(function () { - assertShowValue(); - self._defaultState(); - }); - self.fireEvent(BI.SingleSelectInsertCombo.EVENT_CLICK_ITEM); + listeners: [ + { + eventName: SingleSelectPopupView.EVENT_CHANGE, + action () { + self._dataChange = true; + self.storeValue = this.getValue(); + self._adjust(() => { + assertShowValue(); + self._defaultState(); + }); + self.fireEvent( + SingleSelectInsertCombo.EVENT_CLICK_ITEM + ); + }, } - }], + ], itemsCreator: o.itemsCreator, itemWrapper: o.itemWrapper, valueFormatter: o.valueFormatter, - onLoaded: function () { - BI.nextTick(function () { + onLoaded () { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); self.trigger.getSearcher().adjustView(); }); - } + }, }, - hideChecker: function (e) { + hideChecker (e) { return triggerBtn.element.find(e.target).length === 0; }, - value: o.value + value: o.value, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () { if (!this.isViewVisible()) { - self._dataChange = false;// 标记数据是否发生变化 + self._dataChange = false; // 标记数据是否发生变化 } this.setValue(self.storeValue); - BI.nextTick(function () { + nextTick(() => { self.populate(); }); }); // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件 this.wants2Quit = false; - this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => { // important:关闭弹出时又可能没有退出编辑状态 self.trigger.stopEditing(); if (self.requesting === true) { self.wants2Quit = true; } else { - self._dataChange && self.fireEvent(BI.SingleSelectInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(SingleSelectInsertCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, width: o.height, height: o.height, - cls: "single-select-trigger-icon-button" + cls: "single-select-trigger-icon-button", }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { if (self.combo.isViewVisible()) { self.combo.hideView(); } else { self.combo.showView(); } }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.combo, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: triggerBtn, - right: 0, - top: 0, - bottom: 0 - }] + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0, + } + ], }); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { - }, + _assertValue(val) {} - _makeMap: function (values) { - return BI.makeObject(values || []); - }, + _makeMap(values) { + return makeObject(values || []); + } - _adjust: function (callback) { - var self = this, o = this.options; + _adjust(callback) { + const self = this; adjust(); callback(); - function adjust () { + function adjust() { if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.SingleSelectInsertCombo.EVENT_CONFIRM); + self._dataChange && + self.fireEvent(SingleSelectInsertCombo.EVENT_CONFIRM); self.wants2Quit = false; } self.requesting = false; } - }, + } - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.popup.setStartValue(value); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, - - populate: function () { - this.combo.populate.apply(this.combo, arguments); } -}); -BI.extend(BI.SingleSelectInsertCombo, { - REQ_GET_DATA_LENGTH: 0, - REQ_GET_ALL_DATA: -1 -}); - -BI.SingleSelectInsertCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectInsertCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.SingleSelectInsertCombo.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SingleSelectInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.SingleSelectInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - -BI.shortcut("bi.single_select_insert_combo", BI.SingleSelectInsertCombo); + populate() { + this.combo.populate(...arguments); + } +} diff --git a/src/widget/singleselect/singleselect.list.js b/src/widget/singleselect/singleselect.list.js index 9842eb3ea..13c51656b 100644 --- a/src/widget/singleselect/singleselect.list.js +++ b/src/widget/singleselect/singleselect.list.js @@ -1,41 +1,41 @@ -/** - * 选择列表 - * - * Created by GUY on 2015/11/1. - * @class BI.SingleSelectList - * @extends BI.Widget - */ -BI.SingleSelectList = BI.inherit(BI.Widget, { - - _constants: { - itemHeight: 24 - }, - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectList.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, Controller, Events, i18nText } from "@/core"; +import { ListPane, SingleSelectItem } from "@/case"; + +@shortcut() +export class SingleSelectList extends Widget { + static xtype = "bi.single_select_list"; + + _constants = { itemHeight: 24 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-select-list", direction: BI.Direction.Top, // toolbar的位置 logic: { - dynamic: true + dynamic: true, }, items: [], - itemsCreator: BI.emptyFn, - hasNext: BI.emptyFn, - onLoaded: BI.emptyFn, + itemsCreator: emptyFn, + hasNext: emptyFn, + onLoaded: emptyFn, el: { - type: "bi.list_pane" + type: ListPane.xtype, }, - allowNoSelect: false + allowNoSelect: false, }); - }, - _init: function () { - BI.SingleSelectList.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; - this.list = BI.createWidget(o.el, { - type: "bi.list_pane", + this.list = createWidget(o.el, { + type: ListPane.xtype, items: o.items, - itemsCreator: function (op, callback) { + itemsCreator (op, callback) { op.times === 1 && self.toolbar && self.toolbar.setVisible(false); o.itemsCreator(op, function (items) { callback.apply(self, arguments); @@ -47,117 +47,137 @@ BI.SingleSelectList = BI.inherit(BI.Widget, { }, onLoaded: o.onLoaded, hasNext: o.hasNext, - value: o.value + value: o.value, }); - this.list.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { - if (type === BI.Events.CLICK) { - self.fireEvent(BI.SingleSelectList.EVENT_CHANGE, value, obj); + this.list.on(Controller.EVENT_CHANGE, function (type, value, obj) { + if (type === Events.CLICK) { + self.fireEvent(SingleSelectList.EVENT_CHANGE, value, obj); } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({ - scrolly: true - }, o.logic, { - items: o.allowNoSelect ? BI.LogicFactory.createLogicItemsByDirection(o.direction, { - type: "bi.single_select_item", - cls: "bi-list-item-active", - height: this._constants.itemHeight, - forceNotSelected: true, - text: BI.i18nText("BI-Basic_No_Select"), - ref: function (_ref) { - self.toolbar = _ref; + createWidget( + extend( + { + element: this, }, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) { - self.list.setValue(); - self.fireEvent(BI.SingleSelectList.EVENT_CHANGE); + BI.LogicFactory.createLogic( + BI.LogicFactory.createLogicTypeByDirection(o.direction), + extend( + { + scrolly: true, + }, + o.logic, + { + items: o.allowNoSelect + ? BI.LogicFactory.createLogicItemsByDirection( + o.direction, + { + type: SingleSelectItem.xtype, + cls: "bi-list-item-active", + height: this._constants.itemHeight, + forceNotSelected: true, + text: i18nText("BI-Basic_No_Select"), + ref (_ref) { + self.toolbar = _ref; + }, + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action (type) { + if (type === Events.CLICK) { + self.list.setValue(); + self.fireEvent(SingleSelectList.EVENT_CHANGE); + } + self.fireEvent(Controller.EVENT_CHANGE, arguments); + }, + } + ], + }, + this.list + ) + : BI.LogicFactory.createLogicItemsByDirection(o.direction, this.list), } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }] - }, this.list) : BI.LogicFactory.createLogicItemsByDirection(o.direction, this.list) - })))); - - }, + ) + ) + ) + ); + } - hasPrev: function () { + hasPrev() { return this.list.hasPrev(); - }, + } - hasNext: function () { + hasNext() { return this.list.hasNext(); - }, + } - prependItems: function (items) { - this.list.prependItems.apply(this.list, arguments); - }, + prependItems(items) { + this.list.prependItems(...arguments); + } - addItems: function (items) { - this.list.addItems.apply(this.list, arguments); - }, + addItems(items) { + this.list.addItems(...arguments); + } - setValue: function (v) { + setValue(v) { this.list.setValue([v]); - }, + } - getValue: function () { + getValue() { return this.list.getValue()[0]; - }, + } - empty: function () { + empty() { this.list.empty(); - }, + } - populate: function (items) { - this.list.populate.apply(this.list, arguments); - }, + populate(items) { + this.list.populate(...arguments); + } - resetHeight: function (h) { - this.list.resetHeight ? this.list.resetHeight(h) : - this.list.element.css({"max-height": BI.pixFormat(h - (this.options.allowNoSelect ? this._constants.itemHeight : 0))}); - }, + resetHeight(h) { + this.list.resetHeight + ? this.list.resetHeight(h) + : this.list.element.css({ + "max-height": BI.pixFormat(h - (this.options.allowNoSelect ? this._constants.itemHeight : 0)), + }); + } - setNotSelectedValue: function () { - this.list.setNotSelectedValue.apply(this.list, arguments); - }, + setNotSelectedValue() { + this.list.setNotSelectedValue(...arguments); + } - getNotSelectedValue: function () { + getNotSelectedValue() { return this.list.getNotSelectedValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.list.getAllButtons(); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.list.getAllLeaves(); - }, + } - getSelectedButtons: function () { + getSelectedButtons() { return this.list.getSelectedButtons(); - }, + } - getNotSelectedButtons: function () { + getNotSelectedButtons() { return this.list.getNotSelectedButtons(); - }, + } - getIndexByValue: function (value) { + getIndexByValue(value) { return this.list.getIndexByValue(value); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.list.getNodeById(id); - }, + } - getNodeByValue: function (value) { + getNodeByValue(value) { return this.list.getNodeByValue(value); } -}); -BI.SingleSelectList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_list", BI.SingleSelectList); +} diff --git a/src/widget/singleselect/singleselect.loader.js b/src/widget/singleselect/singleselect.loader.js index 645bdad66..678f4a681 100644 --- a/src/widget/singleselect/singleselect.loader.js +++ b/src/widget/singleselect/singleselect.loader.js @@ -1,178 +1,187 @@ -/** - * 单选加载数据面板 - * Created by guy on 15/11/2. - * @class BI.SingleSelectLoader - * @extends Widget - */ -BI.SingleSelectLoader = BI.inherit(BI.Widget, { - - _constants: { - itemVgap: 5 - }, - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectLoader.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isUndefined, map, isKey, Controller, VerticalLayout, delay } from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SingleSelectList } from "./singleselect.list"; +import { SingleSelectItem, SingleSelectRadioItem } from "@/case"; + +@shortcut() +export class SingleSelectLoader extends Widget { + static xtype = "bi.single_select_loader"; + + _constants = { itemVgap: 5 }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-loader", logic: { - dynamic: true + dynamic: true, }, el: { - height: 400 + height: 400, }, allowNoSelect: false, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - onLoaded: BI.emptyFn + valueFormatter: emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectLoader.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; - var hasNext = false; + const self = this, + opts = this.options; + let hasNext = false; this.storeValue = opts.value; - this.button_group = BI.createWidget({ - type: "bi.single_select_list", + this.button_group = createWidget({ + type: SingleSelectList.xtype, allowNoSelect: opts.allowNoSelect, logic: opts.logic, - el: BI.extend({ - onLoaded: opts.onLoaded, - el: { - type: "bi.loader", - isDefaultInit: false, - logic: { - dynamic: true, - scrolly: true - }, + el: extend( + { + onLoaded: opts.onLoaded, el: { - chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, - behaviors: { - redmark: function () { - return true; - } + type: Loader.xtype, + isDefaultInit: false, + logic: { + dynamic: true, + scrolly: true, }, - layouts: [{ - type: "bi.vertical" - }] - } - } - }, opts.el), - itemsCreator: function (op, callback) { - var startValue = self._startValue; - !BI.isUndefined(self.storeValue) && (op = BI.extend(op || {}, { - selectedValues: [self.storeValue] - })); - opts.itemsCreator(op, function (ob) { + el: { + chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, + behaviors: { + redmark () { + return true; + }, + }, + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + }, + }, + opts.el + ), + itemsCreator (op, callback) { + const startValue = self._startValue; + !isUndefined(self.storeValue) && + (op = extend(op || {}, { + selectedValues: [self.storeValue], + })); + opts.itemsCreator(op, ob => { hasNext = ob.hasNext; - var firstItems = []; - if (op.times === 1 && !BI.isUndefined(self.storeValue)) { - var json = BI.map([self.storeValue], function (i, v) { - var txt = opts.valueFormatter(v) || v; - return opts.itemWrapper({ - text: txt, - value: v, - title: txt, - selected: true - }) || { - text: txt, - value: v, - title: txt, - selected: true - }; + let firstItems = []; + if (op.times === 1 && !isUndefined(self.storeValue)) { + const json = map([self.storeValue], (i, v) => { + const txt = opts.valueFormatter(v) || v; + + return ( + opts.itemWrapper({ + text: txt, + value: v, + title: txt, + selected: true, + }) || { + text: txt, + value: v, + title: txt, + selected: true, + } + ); }); firstItems = self._createItems(json); } callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || ""); if (op.times === 1 && self.storeValue) { - BI.isKey(startValue) && (self.storeValue = startValue); + isKey(startValue) && (self.storeValue = startValue); self.setValue(self.storeValue); } - (op.times === 1) && self._scrollToTop(); + op.times === 1 && self._scrollToTop(); }); }, - hasNext: function () { + hasNext () { return hasNext; }, - value: this.storeValue + value: this.storeValue, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, items: [this.button_group], - vgap: this._constants.itemVgap + vgap: this._constants.itemVgap, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.button_group.on(BI.SingleSelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectLoader.EVENT_CHANGE, arguments); + this.button_group.on(SingleSelectList.EVENT_CHANGE, function () { + self.fireEvent(SingleSelectLoader.EVENT_CHANGE, arguments); }); - }, + } - _createItems: function (items) { - var o = this.options; - return BI.map(items, function (i, item) { - return BI.extend({ - type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item", + _createItems(items) { + const o = this.options; + + return map(items, (i, item) => extend( + { + type: o.allowNoSelect ? SingleSelectItem.xtype : SingleSelectRadioItem.xtype, logic: o.logic, cls: "bi-list-item-active", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, selected: false, iconWrapperWidth: 26, textHgap: o.allowNoSelect ? 10 : 0, - title: item.title || item.text - }, item); - }); - }, + title: item.title || item.text, + }, + item + )); + } - _scrollToTop: function () { - var self = this; - BI.delay(function () { + _scrollToTop() { + const self = this; + delay(() => { self.button_group.element.scrollTop(0); }, 30); - }, + } - _assertValue: function (val) { - }, + _assertValue(val) {} - setStartValue: function (v) { + setStartValue(v) { this._startValue = v; - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this._assertValue(this.storeValue); this.button_group.setValue(this.storeValue); - }, + } - getValue: function () { + getValue() { return this.button_group.getValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - empty: function () { + empty() { this.button_group.empty(); - }, + } - populate: function (items) { - this.button_group.populate.apply(this.button_group, arguments); - }, + populate(items) { + this.button_group.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.button_group.resetHeight(h - this._constants.itemVgap * 2); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.button_group.resetWidth(w); } -}); - -BI.SingleSelectLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_loader", BI.SingleSelectLoader); +} diff --git a/src/widget/singleselect/singleselect.popup.view.js b/src/widget/singleselect/singleselect.popup.view.js index ffa8766bd..c03d71522 100644 --- a/src/widget/singleselect/singleselect.popup.view.js +++ b/src/widget/singleselect/singleselect.popup.view.js @@ -1,84 +1,82 @@ -/** - * 带加载的单选下拉面板 - * @class BI.SingleSelectPopupView - * @extends Widget - */ -BI.SingleSelectPopupView = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; +import { MultiPopupView } from "@/case"; +import { PopupView } from "@/base"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectPopupView.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectPopupView extends Widget { + static xtype = "bi.single_select_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-popup-view", allowNoSelect: false, maxWidth: "auto", minWidth: 135, maxHeight: 400, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - onLoaded: BI.emptyFn + valueFormatter: emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SingleSelectPopupView.superclass._init.apply(this, arguments); - var self = this, opts = this.options; + _init() { + super._init(...arguments); + const opts = this.options; - this.loader = BI.createWidget({ + this.loader = createWidget({ type: "bi.single_select_loader", allowNoSelect: opts.allowNoSelect, itemsCreator: opts.itemsCreator, itemWrapper: opts.itemWrapper, valueFormatter: opts.valueFormatter, onLoaded: opts.onLoaded, - value: opts.value + value: opts.value, }); - this.popupView = BI.createWidget({ - type: "bi.popup_view", + this.popupView = createWidget({ + type: PopupView.xtype, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, element: this, el: this.loader, - value: opts.value + value: opts.value, }); - this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectPopupView.EVENT_CHANGE); + this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { + this.fireEvent(SingleSelectPopupView.EVENT_CHANGE); }); - }, + } - setStartValue: function (v) { + setStartValue(v) { this.loader.setStartValue(v); - }, + } - setValue: function (v) { + setValue(v) { this.popupView.setValue(v); - }, + } - getValue: function () { + getValue() { return this.popupView.getValue(); - }, + } - populate: function (items) { - this.popupView.populate.apply(this.popupView, arguments); - }, + populate(items) { + this.popupView.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.popupView.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.popupView.resetWidth(w); - }, + } - setDirection: function (direction, position) { + setDirection(direction, position) { this.popupView.setDirection(direction, position); - }, -}); - -BI.SingleSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE"; - - -BI.shortcut("bi.single_select_popup_view", BI.SingleSelectPopupView); + } +} diff --git a/src/widget/singleselect/singleselect.trigger.js b/src/widget/singleselect/singleselect.trigger.js index 35c6c0349..02021774c 100644 --- a/src/widget/singleselect/singleselect.trigger.js +++ b/src/widget/singleselect/singleselect.trigger.js @@ -1,40 +1,46 @@ -/** - * - * 单选下拉框 - * @class BI.SingleSelectTrigger - * @extends BI.Trigger - */ - -BI.SingleSelectTrigger = BI.inherit(BI.Trigger, { - - constants: { - height: 14, - rgap: 4, - lgap: 4 - }, - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectTrigger.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, emptyFn, createWidget, HTapeLayout, AbsoluteLayout } from "@/core"; +import { Trigger, Text } from "@/base"; +import { SingleSelectSearcher } from "./trigger"; + +@shortcut() +export class SingleSelectTrigger extends Trigger { + static xtype = "bi.single_select_trigger"; + + constants = { height: 14, rgap: 4, lgap: 4 }; + + static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; + static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-trigger", allowNoSelect: false, - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcher: {}, switcher: {}, adapter: null, masker: {}, - allowEdit: true + allowEdit: true, }); - }, + } - _init: function () { - BI.SingleSelectTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const o = this.options; - this.searcher = BI.createWidget(o.searcher, { - type: "bi.single_select_searcher", + this.searcher = createWidget(o.searcher, { + type: SingleSelectSearcher.xtype, watermark: o.watermark, allowNoSelect: o.allowNoSelect, text: o.text, @@ -44,95 +50,85 @@ BI.SingleSelectTrigger = BI.inherit(BI.Trigger, { popup: {}, adapter: o.adapter, masker: o.masker, - value: o.value + value: o.value, }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_START, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_START); + this.searcher.on(SingleSelectSearcher.EVENT_START, () => { + this.fireEvent(SingleSelectTrigger.EVENT_START); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_PAUSE, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_PAUSE); + this.searcher.on(SingleSelectSearcher.EVENT_PAUSE, () => { + this.fireEvent(SingleSelectTrigger.EVENT_PAUSE); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_SEARCHING, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_SEARCHING, arguments); + this.searcher.on(SingleSelectSearcher.EVENT_SEARCHING, (...args) => { + this.fireEvent(SingleSelectTrigger.EVENT_SEARCHING, ...args); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_STOP, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_STOP); + this.searcher.on(SingleSelectSearcher.EVENT_STOP, () => { + this.fireEvent(SingleSelectTrigger.EVENT_STOP); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_CHANGE, arguments); + this.searcher.on(SingleSelectSearcher.EVENT_CHANGE, (...args) => { + this.fireEvent(SingleSelectTrigger.EVENT_CHANGE, ...args); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_FOCUS); + this.searcher.on(SingleSelectSearcher.EVENT_FOCUS, () => { + this.fireEvent(SingleSelectTrigger.EVENT_FOCUS); }); - this.searcher.on(BI.SingleSelectSearcher.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectTrigger.EVENT_BLUR, arguments); + this.searcher.on(SingleSelectSearcher.EVENT_BLUR, (...args) => { + this.fireEvent(SingleSelectTrigger.EVENT_BLUR, ...args); }); - var wrapper = BI.createWidget({ - type: "bi.htape", + createWidget({ + type: HTapeLayout.xtype, element: this, items: [ { el: this.searcher, - width: "fill" - }, { - el: BI.createWidget(), - width: 24 - }] + width: "fill", + }, + { + el: createWidget(), + width: 24, + } + ], }); - !o.allowEdit && BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: { - type: "bi.text", - title: function () { - return self.searcher.getState(); + !o.allowEdit && + createWidget({ + type: AbsoluteLayout.xtype, + element: this, + items: [ + { + el: { + type: Text.xtype, + title: () => this.searcher.getState(), + }, + left: 0, + right: 24, + top: 0, + bottom: 0, } - }, - left: 0, - right: 24, - top: 0, - bottom: 0 - }] - }); - }, + ], + }); + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setValue: function (v) { + setValue(v) { this.searcher.setValue(v); - }, + } - getKey: function () { + getKey() { return this.searcher.getKey(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); } -}); - -BI.SingleSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.SingleSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; -BI.SingleSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SingleSelectTrigger.EVENT_START = "EVENT_START"; -BI.SingleSelectTrigger.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SingleSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SingleSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; -BI.SingleSelectTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectTrigger.EVENT_BLUR = "EVENT_BLUR"; - -BI.shortcut("bi.single_select_trigger", BI.SingleSelectTrigger); \ No newline at end of file +} diff --git a/src/widget/singleselect/singleselectlist.insert.js b/src/widget/singleselect/singleselectlist.insert.js index cd32a22e8..e2dc37b9b 100644 --- a/src/widget/singleselect/singleselectlist.insert.js +++ b/src/widget/singleselect/singleselectlist.insert.js @@ -1,61 +1,83 @@ -/** - * @author: Teller - * @createdAt: 2018/3/28 - * @Description -*/ -BI.SingleSelectInsertList = BI.inherit(BI.Single, { - _defaultConfig: function () { - return BI.extend(BI.SingleSelectInsertList.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + isKey, + createWidget, + isNotEmptyString, + i18nText, + deepClone, + VerticalFillLayout, + AbsoluteLayout, + makeObject +} from "@/core"; +import { Single, Searcher } from "@/base"; +import { SingleSelectLoader } from "./singleselect.loader"; +import { SelectPatchEditor } from "../multiselect"; +import { SearchEditor } from "../editor"; + +@shortcut() +export class SingleSelectInsertList extends Single { + static xtype = "bi.single_select_insert_list"; + + static REQ_GET_DATA_LENGTH = 0; + static REQ_GET_ALL_DATA = -1; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-insert-list", allowNoSelect: false, - itemsCreator: BI.emptyFn, - itemWrapper: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + itemWrapper: emptyFn, + valueFormatter: emptyFn, searcherHeight: 24, }); - }, - _init: function () { - BI.SingleSelectInsertList.superclass._init.apply(this, arguments); + } + + _init() { + super._init(...arguments); - var self = this, o = this.options; + const self = this, + o = this.options; this.storeValue = o.value; - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue = self._startValue); - // self.trigger.setValue(self.storeValue); + const assertShowValue = () => { + isKey(this._startValue) && (this.storeValue = this._startValue); + // this.trigger.setValue(this.storeValue); }; - this.adapter = BI.createWidget({ - type: "bi.single_select_loader", + this.adapter = createWidget({ + type: SingleSelectLoader.xtype, allowNoSelect: o.allowNoSelect, cls: "popup-single-select-list bi-border-left bi-border-right bi-border-bottom", itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, itemWrapper: o.itemWrapper, logic: { - dynamic: true + dynamic: true, }, // onLoaded: o.onLoaded, el: {}, - value: o.value + value: o.value, }); - this.adapter.on(BI.SingleSelectLoader.EVENT_CHANGE, function () { + this.adapter.on(SingleSelectLoader.EVENT_CHANGE, function () { self.storeValue = this.getValue(); assertShowValue(); - self.fireEvent(BI.SingleSelectInsertList.EVENT_CHANGE); + self.fireEvent(SingleSelectInsertList.EVENT_CHANGE); }); - this.searcherPane = BI.createWidget({ + this.searcherPane = createWidget({ type: "bi.single_select_search_insert_pane", allowNoSelect: o.allowNoSelect, cls: "bi-border-left bi-border-right bi-border-bottom", valueFormatter: o.valueFormatter, - keywordGetter: function () { + keywordGetter () { return self.trigger.getKeyword(); }, - itemsCreator: function (op, callback) { + itemsCreator (op, callback) { op.keywords = [self.trigger.getKeyword()]; - if (BI.isNotEmptyString(op.keywords[0])) { + if (isNotEmptyString(op.keywords[0])) { this.setKeyword(op.keywords[0]); o.itemsCreator(op, callback); } @@ -63,145 +85,147 @@ BI.SingleSelectInsertList = BI.inherit(BI.Single, { }); this.searcherPane.setVisible(false); - this.trigger = BI.createWidget({ - type: "bi.searcher", + this.trigger = createWidget({ + type: Searcher.xtype, el: { - type: "bi.select_patch_editor", + type: SelectPatchEditor.xtype, el: { - type: "bi.search_editor", - watermark: BI.i18nText("BI-Basic_Search_And_Patch_Paste"), + type: SearchEditor.xtype, + watermark: i18nText("BI-Basic_Search_And_Patch_Paste"), }, - ref: function (ref) { + ref (ref) { self.editor = ref; }, height: o.searcherHeight, }, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch (op, callback) { callback(); }, adapter: this.adapter, popup: this.searcherPane, masker: false, value: o.value, - listeners: [{ - eventName: BI.Searcher.EVENT_START, - action: function () { - self._showSearcherPane(); - self._setStartValue(); - this.setValue(BI.deepClone(self.storeValue)); - } - }, { - eventName: BI.Searcher.EVENT_STOP, - action: function () { - self._showAdapter(); - self._setStartValue(); - self.adapter.setValue(self.storeValue); - // 需要刷新回到初始界面，否则搜索的结果不能放在最前面 - self.adapter.populate(); - } - }, { - eventName: BI.Searcher.EVENT_PAUSE, - action: function () { - var keyword = this.getKeyword(); - self.storeValue = keyword; - self._showAdapter(); - self.adapter.setValue(self.storeValue); - self._setStartValue(keyword); - assertShowValue(); - self.adapter.populate(); - self._setStartValue(); - self.fireEvent(BI.SingleSelectInsertList.EVENT_CHANGE); - - } - }, { - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - self.storeValue = this.getValue(); - self.fireEvent(BI.SingleSelectInsertList.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_START, + action () { + self._showSearcherPane(); + self._setStartValue(); + this.setValue(deepClone(self.storeValue)); + }, + }, + { + eventName: Searcher.EVENT_STOP, + action () { + self._showAdapter(); + self._setStartValue(); + self.adapter.setValue(self.storeValue); + // 需要刷新回到初始界面，否则搜索的结果不能放在最前面 + self.adapter.populate(); + }, + }, + { + eventName: Searcher.EVENT_PAUSE, + action () { + const keyword = this.getKeyword(); + self.storeValue = keyword; + self._showAdapter(); + self.adapter.setValue(self.storeValue); + self._setStartValue(keyword); + assertShowValue(); + self.adapter.populate(); + self._setStartValue(); + self.fireEvent(SingleSelectInsertList.EVENT_CHANGE); + }, + }, + { + eventName: Searcher.EVENT_CHANGE, + action () { + self.storeValue = this.getValue(); + self.fireEvent(SingleSelectInsertList.EVENT_CHANGE); + }, } - }] + ], }); - BI.createWidget({ - type: "bi.vertical_fill", + createWidget({ + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], element: this, - items: [{ - el: this.trigger, - }, { - el: this.adapter, - }] + items: [ + { + el: this.trigger, + }, + { + el: this.adapter, + } + ], }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.searcherPane, - top: 24, - bottom: 0, - left: 0, - right: 0 - }] + items: [ + { + el: this.searcherPane, + top: 24, + bottom: 0, + left: 0, + right: 0, + } + ], }); - }, + } - _showAdapter: function () { + _showAdapter() { this.adapter.setVisible(true); this.searcherPane.setVisible(false); - }, + } - _showSearcherPane: function () { + _showSearcherPane() { this.searcherPane.setVisible(true); this.adapter.setVisible(false); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); - }, + } - _assertValue: function () {}, + _assertValue() {} - _makeMap: function (values) { - return BI.makeObject(values || []); - }, + _makeMap(values) { + return makeObject(values || []); + } - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.adapter.setStartValue(value); - }, + } - isAllSelected: function () { + isAllSelected() { return this.adapter.isAllSelected(); - }, + } - resize: function () { + resize() { // this.trigger.getCounter().adjustView(); // this.trigger.adjustView(); - }, - setValue: function (v) { + } + + setValue(v) { this.storeValue = v; this.adapter.setValue(this.storeValue); this.trigger.setValue(this.storeValue); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue); - }, + getValue() { + return deepClone(this.storeValue); + } - populate: function () { + populate() { this._count = null; this._allData = null; - this.adapter.populate.apply(this.adapter, arguments); - this.trigger.populate.apply(this.trigger, arguments); + this.adapter.populate(...arguments); + this.trigger.populate(...arguments); } -}); - -BI.extend(BI.SingleSelectInsertList, { - REQ_GET_DATA_LENGTH: 0, - REQ_GET_ALL_DATA: -1 -}); - -BI.SingleSelectInsertList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_insert_list", BI.SingleSelectInsertList); +} diff --git a/src/widget/singleselect/trigger/editor.singleselect.js b/src/widget/singleselect/trigger/editor.singleselect.js index 881f60b45..635b7481e 100644 --- a/src/widget/singleselect/trigger/editor.singleselect.js +++ b/src/widget/singleselect/trigger/editor.singleselect.js @@ -1,25 +1,28 @@ -/** - * 单选输入框 - * Created by guy on 15/11/3. - * @class BI.SingleSelectEditor - * @extends Widget - */ -BI.SingleSelectEditor = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, i18nText, createWidget, Controller, isEmptyString, isEmptyArray, BlankSplitChar } from "@/core"; +import { StateEditor } from "@/case"; +import { SelectPatchEditor } from "../../multiselect"; - _defaultConfig: function () { - return BI.extend(BI.SingleSelectEditor.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SingleSelectEditor extends Widget { + static xtype = "bi.single_select_editor"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-editor", el: {}, - text: BI.i18nText("BI-Basic_Please_Select"), - watermark: BI.i18nText("BI-Basic_Search"), + text: i18nText("BI-Basic_Please_Select"), + watermark: i18nText("BI-Basic_Search"), }); - }, + } - _init: function () { - BI.SingleSelectEditor.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.select_patch_editor", + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget(o.el, { + type: SelectPatchEditor.xtype, element: this, height: o.height, watermark: o.watermark, @@ -29,64 +32,59 @@ BI.SingleSelectEditor = BI.inherit(BI.Widget, { text: o.text, }); - this.editor.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.editor.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.editor.on(BI.StateEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.SingleSelectEditor.EVENT_FOCUS); + this.editor.on(StateEditor.EVENT_FOCUS, () => { + this.fireEvent(SingleSelectEditor.EVENT_FOCUS); }); - this.editor.on(BI.StateEditor.EVENT_BLUR, function () { - self.fireEvent(BI.SingleSelectEditor.EVENT_BLUR); + this.editor.on(StateEditor.EVENT_BLUR, () => { + this.fireEvent(SingleSelectEditor.EVENT_BLUR); }); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setState: function (state) { + setState(state) { this.editor.setState(state); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setValue(v); - }, + } - getValue: function () { + getValue() { return this.editor.getValue(); - }, + } - getKeywords: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); - if (BI.isEmptyString(keywords[keywords.length - 1])) { + getKeywords() { + const val = this.editor.getValue(); + let keywords = val.split(/\u200b\s\u200b/); + if (isEmptyString(keywords[keywords.length - 1])) { keywords = keywords.slice(0, keywords.length - 1); } if (/\u200b\s\u200b$/.test(val)) { - return keywords.concat([BI.BlankSplitChar]); + return keywords.concat([BlankSplitChar]); } return keywords; - }, + } - getKeyword: function () { - var val = this.editor.getValue(); - var keywords = val.split(/\u200b\s\u200b/); - if (BI.isEmptyString(keywords[keywords.length - 1])) { + getKeyword() { + const val = this.editor.getValue(); + let keywords = val.split(/\u200b\s\u200b/); + if (isEmptyString(keywords[keywords.length - 1])) { keywords = keywords.slice(0, keywords.length - 1); } - return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; - }, - - populate: function (items) { + return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; } -}); -BI.SingleSelectEditor.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectEditor.EVENT_BLUR = "EVENT_BLUR"; -BI.shortcut("bi.single_select_editor", BI.SingleSelectEditor); \ No newline at end of file + populate(items) {} +} diff --git a/src/widget/singleselect/trigger/index.js b/src/widget/singleselect/trigger/index.js new file mode 100644 index 000000000..e5abc14b0 --- /dev/null +++ b/src/widget/singleselect/trigger/index.js @@ -0,0 +1,2 @@ +export { SingleSelectEditor } from "./editor.singleselect"; +export { SingleSelectSearcher } from "./searcher.singleselect"; diff --git a/src/widget/singleselect/trigger/searcher.singleselect.js b/src/widget/singleselect/trigger/searcher.singleselect.js index 800fd7560..82b581942 100644 --- a/src/widget/singleselect/trigger/searcher.singleselect.js +++ b/src/widget/singleselect/trigger/searcher.singleselect.js @@ -1,162 +1,161 @@ -/** - * searcher - * Created by guy on 15/11/3. - * @class BI.SingleSelectSearcher - * @extends Widget - */ -BI.SingleSelectSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SingleSelectSearcher.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isNotNull, isUndefined, Selection } from "@/core"; +import { SingleSelectEditor } from "./editor.singleselect"; +import { Searcher } from "@/base"; + +@shortcut() +export class SingleSelectSearcher extends Widget { + static xtype = "bi.single_select_searcher"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-single-select-searcher", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, el: {}, popup: {}, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, adapter: null, masker: {}, - allowNoSelect: false + allowNoSelect: false, }); - }, + } - _init: function () { - BI.SingleSelectSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.editor = createWidget(o.el, { type: "bi.single_select_editor", height: o.height, watermark: o.watermark, text: o.text, listeners: [{ - eventName: BI.SingleSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_FOCUS); - } - }, { - eventName: BI.SingleSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_BLUR); - } - }] + eventName: SingleSelectEditor.EVENT_FOCUS, + action: () => { + this.fireEvent(SingleSelectSearcher.EVENT_FOCUS); + }, + }, + { + eventName: SingleSelectEditor.EVENT_BLUR, + action: () => { + this.fireEvent(SingleSelectSearcher.EVENT_BLUR); + }, + } + ], }); - this.searcher = BI.createWidget({ - type: "bi.searcher", + this.searcher = createWidget({ + type: Searcher.xtype, element: this, height: o.height, isAutoSearch: false, isAutoSync: false, - onSearch: function (op, callback) { + onSearch(op, callback) { callback(); }, el: this.editor, - popup: BI.extend({ + popup: extend({ type: "bi.single_select_search_pane", allowNoSelect: o.allowNoSelect, valueFormatter: o.valueFormatter, - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - var keyword = self.editor.getValue(); + keywordGetter: () => this.editor.getValue(), + itemsCreator(op, callback) { + const keyword = self.editor.getValue(); op.keywords = [keyword]; this.setKeyword(keyword); o.itemsCreator(op, callback); }, - value: o.value - }, o.popup), + value: o.value, + }, + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + this.fireEvent(SingleSelectSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.SingleSelectSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + this.fireEvent(SingleSelectSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + this.fireEvent(SingleSelectSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SingleSelectSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, (...args) => { + this.fireEvent(SingleSelectSearcher.EVENT_CHANGE, ...args); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.SingleSelectSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, () => { + const keywords = this.searcher.getKeywords(); + this.fireEvent(SingleSelectSearcher.EVENT_SEARCHING, keywords); }); - if(BI.isNotNull(o.value)){ + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - adjustView: function () { + adjustView() { this.searcher.adjustView(); - }, + } - isSearching: function () { + isSearching() { return this.searcher.isSearching(); - }, + } - stopSearch: function () { + stopSearch() { this.searcher.stopSearch(); - }, + } - getKeyword: function () { + getKeyword() { return this.editor.getKeyword(); - }, + } - hasMatched: function () { + hasMatched() { return this.searcher.hasMatched(); - }, + } - hasChecked: function () { + hasChecked() { return this.searcher.getView() && this.searcher.getView().hasChecked(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); - }, + } - setState: function (v) { - var o = this.options; - if (BI.isUndefined(v)) { - this.editor.setState(BI.Selection.None); + setState(v) { + const o = this.options; + if (isUndefined(v)) { + this.editor.setState(Selection.None); } else { v = v ?? ""; - this.editor.setState(o.valueFormatter(v + "") || (v + "")); + this.editor.setState(o.valueFormatter(`${v}`) || `${v}`); } - }, + } - setValue: function (ob) { + setValue(ob) { this.setState(ob); this.searcher.setValue(ob); - }, + } - getKey: function () { + getKey() { return this.editor.getValue(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - populate: function (items) { - this.searcher.populate.apply(this.searcher, arguments); + populate(items) { + this.searcher.populate(...arguments); } -}); - -BI.SingleSelectSearcher.EVENT_FOCUS = "EVENT_FOCUS"; -BI.SingleSelectSearcher.EVENT_BLUR = "EVENT_BLUR"; -BI.SingleSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.SingleSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SingleSelectSearcher.EVENT_START = "EVENT_START"; -BI.SingleSelectSearcher.EVENT_STOP = "EVENT_STOP"; -BI.SingleSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SingleSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.shortcut("bi.single_select_searcher", BI.SingleSelectSearcher); +} From 7c29cb461cbc41f471a2c67fc055cdac566632a1 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Fri, 13 Jan 2023 11:01:17 +0800 Subject: [PATCH 3/3] =?UTF-8?q?KERNEL-14101=20refactor:=20multilayerdownli?= =?UTF-8?q?st=E3=80=81multilayersingletree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc | 3 +- src/widget/index.js | 6 + .../multilayerdownlist/combo.downlist.js | 94 ++--- src/widget/multilayerdownlist/index.js | 2 + .../multilayerdownlist/popup.downlist.js | 380 ++++++++++-------- src/widget/multilayersingletree/index.js | 7 + .../multilayersingletree.combo.js | 356 ++++++++-------- ...multilayersingletree.insert.search.pane.js | 140 ++++--- .../multilayersingletree.leveltree.js | 228 ++++++----- .../multilayersingletree.popup.js | 79 ++-- .../multilayersingletree.trigger.js | 311 ++++++++------ src/widget/multilayersingletree/node/index.js | 4 + .../node/node.first.plus.js | 117 +++--- .../node/node.last.plus.js | 117 +++--- .../node/node.mid.plus.js | 117 +++--- .../multilayersingletree/node/node.plus.js | 130 +++--- .../multilayersingletree/treeitem/index.js | 3 + .../treeitem/item.first.treeleaf.js | 93 ++--- .../treeitem/item.last.treeleaf.js | 93 ++--- .../treeitem/item.mid.treeleaf.js | 93 ++--- 20 files changed, 1315 insertions(+), 1058 deletions(-) create mode 100644 src/widget/multilayerdownlist/index.js create mode 100644 src/widget/multilayersingletree/index.js create mode 100644 src/widget/multilayersingletree/node/index.js create mode 100644 src/widget/multilayersingletree/treeitem/index.js diff --git a/.eslintrc b/.eslintrc index a2c317000..427a7b32b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -36,7 +36,8 @@ "no-var": 2, "prefer-const": 2, "indent": ["error", 4], - "no-use-before-define": 0 + "no-use-before-define": 0, + "eqeqeq": 0 } }, { "files": ["webpack/*.js", "./*.js", "lib/**/*.js", "lib/*.js", "./bin/*.js", "./bin/**/*.js"], diff --git a/src/widget/index.js b/src/widget/index.js index 84e8b6e4f..e7d24f493 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -20,6 +20,8 @@ import { NumberInterval } from "./numberinterval/numberinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; import * as singleselect from "./singleselect"; +import * as multilayerdownlist from "./multilayerdownlist"; +import * as multilayersingletree from "./multilayersingletree"; Object.assign(BI, { Collapse, @@ -44,6 +46,8 @@ Object.assign(BI, { ...multiselect, ...multiselectlist, ...singleselect, + ...multilayerdownlist, + ...multilayersingletree, }); export * from "./date/calendar"; @@ -60,6 +64,8 @@ export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; export * from "./singleselect"; +export * from "./multilayerdownlist"; +export * from "./multilayersingletree"; export { Collapse, diff --git a/src/widget/multilayerdownlist/combo.downlist.js b/src/widget/multilayerdownlist/combo.downlist.js index e2e333827..281e2fc0f 100644 --- a/src/widget/multilayerdownlist/combo.downlist.js +++ b/src/widget/multilayerdownlist/combo.downlist.js @@ -1,9 +1,18 @@ -/** - * Created by roy on 15/8/14. - */ -BI.MultiLayerDownListCombo = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerDownListCombo.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, createWidget } from "@/core"; +import { MultiLayerDownListPopup } from "./popup.downlist"; +import { Combo } from "@/base"; +import { IconTrigger } from "@/case"; + +@shortcut() +export class MultiLayerDownListCombo extends Widget { + static xtype = "bi.multi_layer_down_list_combo"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-down-list-combo", height: 24, items: [], @@ -12,79 +21,74 @@ BI.MultiLayerDownListCombo = BI.inherit(BI.Widget, { trigger: "click", container: null, stopPropagation: false, - el: {} + el: {}, }); - }, + } - _init: function () { - BI.MultiLayerDownListCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.popupview = BI.createWidget({ + _init() { + super._init(...arguments); + const o = this.options; + this.popupview = createWidget({ type: "bi.multi_layer_down_list_popup", items: o.items, chooseType: o.chooseType, - value: o.value + value: o.value, }); - this.popupview.on(BI.MultiLayerDownListPopup.EVENT_CHANGE, function (value) { - self.fireEvent(BI.MultiLayerDownListCombo.EVENT_CHANGE, value); - self.downlistcombo.hideView(); + this.popupview.on(MultiLayerDownListPopup.EVENT_CHANGE, value => { + this.fireEvent(MultiLayerDownListCombo.EVENT_CHANGE, value); + this.downlistcombo.hideView(); }); - this.popupview.on(BI.MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, function (value, fatherValue) { - self.fireEvent(BI.MultiLayerDownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue); - self.downlistcombo.hideView(); + this.popupview.on(MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, (value, fatherValue) => { + this.fireEvent(MultiLayerDownListCombo.EVENT_SON_VALUE_CHANGE, value, fatherValue); + this.downlistcombo.hideView(); }); - - this.downlistcombo = BI.createWidget({ + this.downlistcombo = createWidget({ element: this, - type: "bi.combo", + type: Combo.xtype, trigger: o.trigger, isNeedAdjustWidth: false, container: o.container, adjustLength: o.adjustLength, direction: o.direction, stopPropagation: o.stopPropagation, - el: BI.createWidget(o.el, { - type: "bi.icon_trigger", + el: createWidget(o.el, { + type: IconTrigger.xtype, extraCls: o.iconCls ? o.iconCls : "pull-down-font", width: o.width, - height: o.height + height: o.height, }), popup: { el: this.popupview, stopPropagation: o.stopPropagation, - maxHeight: 1000 - } + maxHeight: 1000, + }, }); - this.downlistcombo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.MultiLayerDownListCombo.EVENT_BEFORE_POPUPVIEW); + this.downlistcombo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.fireEvent(MultiLayerDownListCombo.EVENT_BEFORE_POPUPVIEW); }); - }, + } - hideView: function () { + hideView() { this.downlistcombo.hideView(); - }, + } - showView: function (e) { + showView(e) { this.downlistcombo.showView(e); - }, + } - populate: function (items) { + populate(items) { this.popupview.populate(items); - }, + } - setValue: function (v) { + setValue(v) { this.popupview.setValue(v); - }, - getValue: function () { - return this.popupview.getValue(); } -}); -BI.MultiLayerDownListCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerDownListCombo.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; -BI.MultiLayerDownListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.multi_layer_down_list_combo", BI.MultiLayerDownListCombo); \ No newline at end of file + getValue() { + return this.popupview.getValue(); + } +} diff --git a/src/widget/multilayerdownlist/index.js b/src/widget/multilayerdownlist/index.js new file mode 100644 index 000000000..e73818700 --- /dev/null +++ b/src/widget/multilayerdownlist/index.js @@ -0,0 +1,2 @@ +export { MultiLayerDownListCombo } from "./combo.downlist"; +export { MultiLayerDownListPopup } from "./popup.downlist"; diff --git a/src/widget/multilayerdownlist/popup.downlist.js b/src/widget/multilayerdownlist/popup.downlist.js index 8fbacd285..b8abc5cf9 100644 --- a/src/widget/multilayerdownlist/popup.downlist.js +++ b/src/widget/multilayerdownlist/popup.downlist.js @@ -1,136 +1,173 @@ -/** - * Created by roy on 15/9/8. - * 处理popup中的item分组样式 - * 一个item分组中的成员大于一时，该分组设置为单选，并且默认状态第一个成员设置为已选择项 - */ -BI.MultiLayerDownListPopup = BI.inherit(BI.Pane, { - constants: { +import { + shortcut, + extend, + Selection, + createWidget, + createItems, + isNotNull, + contains, + each, + VerticalLayout, + isNotEmptyArray, + isEmpty, + Layout, + deepClone, + isArray, + isNotEmptyString, + some, + concat, + BlankSplitChar +} from "@/core"; +import { Pane, ButtonTree, ComboGroup } from "@/base"; +import { DownListGroup, DownListGroupItem, DownListItem } from "../downlist"; + +@shortcut() +export class MultiLayerDownListPopup extends Pane { + static xtype = "bi.multi_layer_down_list_popup"; + + constants = { nextIcon: "pull-right-e-font", height: 25, iconHeight: 12, iconWidth: 12, hgap: 0, vgap: 0, - border: 1 - }, - _defaultConfig: function () { - var conf = BI.MultiLayerDownListPopup.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { + border: 1, + }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-down-list-popup", items: [], - chooseType: BI.Selection.Multi + chooseType: Selection.Multi, }); - }, - _init: function () { - BI.MultiLayerDownListPopup.superclass._init.apply(this, arguments); + } + + _init() { + super._init(...arguments); this.singleValues = []; this.childValueMap = {}; this.fatherValueMap = {}; this.items = []; - var self = this, o = this.options, children = this._createPopupItems(o.items); - this.popup = BI.createWidget({ - type: "bi.button_tree", - items: BI.createItems(children, - {}, { - adjustLength: -2 + const self = this, + o = this.options, + children = this._createPopupItems(o.items); + this.popup = createWidget({ + type: ButtonTree.xtype, + items: createItems( + children, + {}, + { + adjustLength: -2, } ), - layouts: [{ - type: "bi.vertical", - hgap: this.constants.hgap, - vgap: this.constants.vgap - }], + layouts: [ + { + type: VerticalLayout.xtype, + hgap: this.constants.hgap, + vgap: this.constants.vgap, + } + ], value: this._digest(o.value), - chooseType: o.chooseType + chooseType: o.chooseType, }); - this.popup.on(BI.ButtonTree.EVENT_CHANGE, function (value, object) { - var changedValue = value; - if (BI.isNotNull(self.childValueMap[value])) { + this.popup.on(ButtonTree.EVENT_CHANGE, (value, object) => { + let changedValue = value; + if (isNotNull(self.childValueMap[value])) { changedValue = self.childValueMap[value]; - var fatherValue = self.fatherValueMap[value]; - var fatherArrayValue = (fatherValue + "").split(BI.BlankSplitChar); - self.fireEvent(BI.MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, changedValue, fatherArrayValue.length > 1 ? fatherArrayValue : fatherValue); + const fatherValue = self.fatherValueMap[value]; + const fatherArrayValue = (`${fatherValue}`).split(BlankSplitChar); + self.fireEvent( + MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE, + changedValue, + fatherArrayValue.length > 1 ? fatherArrayValue : fatherValue + ); } else { - self.fireEvent(BI.MultiLayerDownListPopup.EVENT_CHANGE, changedValue, object); + self.fireEvent(MultiLayerDownListPopup.EVENT_CHANGE, changedValue, object); } - - if (!BI.contains(self.singleValues, changedValue)) { - var item = self.getValue(); - var result = []; - BI.each(item, function (i, valueObject) { + if (!contains(self.singleValues, changedValue)) { + const item = self.getValue(); + const result = []; + each(item, (i, valueObject) => { if (valueObject.value != changedValue) { result.push(valueObject); } }); self.setValue(result); } - }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, element: this, items: [this.popup], - vgap: 5 + vgap: 5, }); + } - }, - _createPopupItems: function (items) { - var self = this, result = []; - BI.each(items, function (i, it) { - var item_done = { - type: "bi.down_list_group", - items: [] + _createPopupItems(items) { + const self = this, + result = []; + each(items, (i, it) => { + const item_done = { + type: DownListGroup.xtype, + items: [], }; - var storeItem = []; + const storeItem = []; - BI.each(it, function (i, sourceItem) { - var item = BI.extend({}, sourceItem); - if (BI.isNotEmptyArray(sourceItem.children) && !BI.isEmpty(sourceItem.el)) { - item.type = "bi.combo_group"; + each(it, (i, sourceItem) => { + const item = extend({}, sourceItem); + if (isNotEmptyArray(sourceItem.children) && !isEmpty(sourceItem.el)) { + item.type = ComboGroup.xtype; item.cls = "down-list-group"; item.trigger = "hover"; item.isNeedAdjustWidth = false; item.el = sourceItem.el; item.el.title = sourceItem.el.title || sourceItem.el.text; - item.el.type = "bi.down_list_group_item"; + item.el.type = DownListGroupItem.xtype; item.el.logic = { - dynamic: true + dynamic: true, }; item.el.height = sourceItem.el.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; item.el.iconCls2 = self.constants.nextIcon; item.popup = { lgap: 1, el: { - type: "bi.button_tree", + type: ButtonTree.xtype, chooseType: 0, - layouts: [{ - type: "bi.vertical" - }] - + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }, innerVgap: 5, maxHeight: 378, }; self._createChildren(item, sourceItem); } else { - item.type = sourceItem.type || "bi.down_list_item"; + item.type = sourceItem.type || DownListItem.xtype; item.title = sourceItem.title || sourceItem.text; item.textRgap = 10; item.isNeedAdjustWidth = false; item.logic = { - dynamic: true + dynamic: true, }; } - var el_done = {}; + const el_done = {}; el_done.el = item; item_done.items.push(el_done); storeItem.push(item); }); if (self._isGroup(item_done.items)) { - BI.each(item_done.items, function (i, item) { + each(item_done.items, (i, item) => { self.singleValues.push(item.el.value); }); } @@ -138,16 +175,17 @@ BI.MultiLayerDownListPopup = BI.inherit(BI.Pane, { result.push(item_done); self.items.push(storeItem); if (self._needSpliter(i, items.length)) { - var spliter_container = BI.createWidget({ - type: "bi.vertical", - items: [{ - el: { - type: "bi.layout", - cls: "bi-down-list-spliter bi-border-top cursor-pointer", - height: 0 + const spliter_container = createWidget({ + type: VerticalLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "bi-down-list-spliter bi-border-top cursor-pointer", + height: 0, + }, } - - }], + ], cls: "bi-down-list-spliter-container cursor-pointer", vgap: 5, hgap: 12, @@ -155,178 +193,180 @@ BI.MultiLayerDownListPopup = BI.inherit(BI.Pane, { result.push(spliter_container); } }); + return result; - }, + } - _createChildren: function (targetItem, sourceItem) { - var self = this; + _createChildren(targetItem, sourceItem) { + const self = this; this._formatEL(targetItem).el.childValues = []; targetItem.items = targetItem.children = []; - BI.each(sourceItem.children, function (i, child) { - var item = child.el ? BI.extend({}, child.el, {children: child.children}) : BI.extend({}, child); - var fatherValue = BI.deepClone(self._formatEL(targetItem).el.value); - var childValue = BI.deepClone(item.value); + each(sourceItem.children, (i, child) => { + const item = child.el ? extend({}, child.el, { children: child.children }) : extend({}, child); + const fatherValue = deepClone(self._formatEL(targetItem).el.value); + const childValue = deepClone(item.value); self.singleValues.push(item.value); - item.type = item.type || "bi.down_list_item"; + item.type = item.type || DownListItem.xtype; item.extraCls = " child-down-list-item"; item.title = item.title || item.text; item.textRgap = 10; item.isNeedAdjustWidth = false; item.logic = { - dynamic: true + dynamic: true, }; item.father = fatherValue; self.fatherValueMap[self._createChildValue(fatherValue, childValue)] = fatherValue; self.childValueMap[self._createChildValue(fatherValue, childValue)] = childValue; item.value = self._createChildValue(fatherValue, childValue); self._formatEL(targetItem).el.childValues.push(item.value); - if (BI.isNotEmptyArray(child.children)) { - item.type = "bi.down_list_group_item"; + if (isNotEmptyArray(child.children)) { + item.type = DownListGroupItem.xtype; item.iconCls2 = self.constants.nextIcon; item.height = child.height || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT; self._createChildren(item, child); } targetItem.items.push(item); }); - }, + } - _formatEL: function(obj) { + _formatEL(obj) { if (obj && obj.el) { return obj; } return { - el: obj + el: obj, }; - }, + } - _isGroup: function (i) { + _isGroup(i) { return i.length > 1; - }, + } - _needSpliter: function (i, itemLength) { + _needSpliter(i, itemLength) { return i < itemLength - 1; - }, + } - _createChildValue: function (fatherValue, childValue) { - var fValue = fatherValue; - if(BI.isArray(fatherValue)) { - fValue = fatherValue.join(BI.BlankSplitChar); + _createChildValue(fatherValue, childValue) { + let fValue = fatherValue; + if (isArray(fatherValue)) { + fValue = fatherValue.join(BlankSplitChar); } - return fValue + BI.BlankSplitChar + childValue; - }, + + return fValue + BlankSplitChar + childValue; + } - _digest: function (valueItem) { - var self = this; - var valueArray = []; - BI.each(valueItem, function (i, item) { - var value; - if (BI.isNotNull(item.childValue)) { - value = self._createChildValue(item.value, item.childValue); - } else { - value = item.value; - } - valueArray.push(value); + _digest(valueItem) { + const self = this; + const valueArray = []; + each(valueItem, (i, item) => { + let value; + if (isNotNull(item.childValue)) { + value = self._createChildValue(item.value, item.childValue); + } else { + value = item.value; } - ); + valueArray.push(value); + }); + return valueArray; - }, + } - _checkValues: function (values) { - var self = this, o = this.options; - var value = []; - BI.each(this.items, function (idx, itemGroup) { - BI.each(itemGroup, function (id, item) { - if(BI.isNotNull(item.children)) { - var childValues = getChildrenValue(item); - var v = joinValue(childValues, values[idx]); - if(BI.isNotEmptyString(v)) { + _checkValues(values) { + const value = []; + each(this.items, (idx, itemGroup) => { + each(itemGroup, (id, item) => { + if (isNotNull(item.children)) { + const childValues = getChildrenValue(item); + const v = joinValue(childValues, values[idx]); + if (isNotEmptyString(v)) { value.push(v); } - }else{ - if(item.value === values[idx][0]) { + } else { + if (item.value === values[idx][0]) { value.push(values[idx][0]); } } }); }); + return value; - function joinValue (sources, targets) { - var value = ""; - BI.some(sources, function (idx, s) { - return BI.some(targets, function (id, t) { - if(s === t) { - value = s; - return true; - } - }); - }); + function joinValue(sources, targets) { + let value = ""; + some(sources, (idx, s) => some(targets, (id, t) => { + if (s === t) { + value = s; + + return true; + } + })); + return value; } - function getChildrenValue (item) { - var children = []; - if(BI.isNotNull(item.children)) { - BI.each(item.children, function (idx, child) { - children = BI.concat(children, getChildrenValue(child)); + function getChildrenValue(item) { + let children = []; + if (isNotNull(item.children)) { + each(item.children, (idx, child) => { + children = concat(children, getChildrenValue(child)); }); } else { children.push(item.value); } + return children; } - }, + } - populate: function (items) { - BI.MultiLayerDownListPopup.superclass.populate.apply(this, arguments); - var self = this; + populate(items) { + super.populate(...arguments); + const self = this; self.childValueMap = {}; self.fatherValueMap = {}; self.singleValues = []; this.items = []; - var children = self._createPopupItems(items); - var popupItem = BI.createItems(children, - {}, { - adjustLength: -2 + const children = self._createPopupItems(items); + const popupItem = createItems( + children, + {}, + { + adjustLength: -2, } ); self.popup.populate(popupItem); - }, + } - setValue: function (valueItem) { + setValue(valueItem) { this.popup.setValue(this._digest(valueItem)); - }, + } - _getValue: function () { - var v = []; - BI.each(this.popup.getAllButtons(), function (i, item) { + _getValue() { + const v = []; + each(this.popup.getAllButtons(), (i, item) => { i % 2 === 0 && v.push(item.getValue()); }); + return v; - }, + } - getValue: function () { - var self = this, result = []; - var values = this._checkValues(this._getValue()); - BI.each(values, function (i, value) { - var valueItem = {}; - if (BI.isNotNull(self.childValueMap[value])) { - var fartherValue = self.fatherValueMap[value]; + getValue() { + const self = this, + result = []; + const values = this._checkValues(this._getValue()); + each(values, (i, value) => { + const valueItem = {}; + if (isNotNull(self.childValueMap[value])) { + const fartherValue = self.fatherValueMap[value]; valueItem.childValue = self.childValueMap[value]; - var fatherArrayValue = (fartherValue + "").split(BI.BlankSplitChar); + const fatherArrayValue = (`${fartherValue}`).split(BlankSplitChar); valueItem.value = fatherArrayValue.length > 1 ? fatherArrayValue : fartherValue; } else { valueItem.value = value; } result.push(valueItem); }); + return result; } - - -}); - -BI.MultiLayerDownListPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerDownListPopup.EVENT_SON_VALUE_CHANGE = "EVENT_SON_VALUE_CHANGE"; -BI.shortcut("bi.multi_layer_down_list_popup", BI.MultiLayerDownListPopup); +} diff --git a/src/widget/multilayersingletree/index.js b/src/widget/multilayersingletree/index.js new file mode 100644 index 000000000..4098e74cc --- /dev/null +++ b/src/widget/multilayersingletree/index.js @@ -0,0 +1,7 @@ +export { MultiLayerSingleTreeCombo } from "./multilayersingletree.combo"; +export { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.insert.search.pane"; +export { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; +export { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; +export { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger"; +export * from "./node"; +export * from "./treeitem"; diff --git a/src/widget/multilayersingletree/multilayersingletree.combo.js b/src/widget/multilayersingletree/multilayersingletree.combo.js index 4e26c1a0c..793d2364d 100644 --- a/src/widget/multilayersingletree/multilayersingletree.combo.js +++ b/src/widget/multilayersingletree/multilayersingletree.combo.js @@ -1,81 +1,105 @@ -/** - * 多层级下拉单选树 - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreeCombo - * @extends BI.Widget - */ -BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, isKey, toPix, AbsoluteLayout, nextTick, isArray } from "@/core"; +import { SingleTreeTrigger } from "../singletree/singletree.trigger"; +import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; +import { Combo } from "@/base"; +import { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger"; +import { TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiLayerSingleTreeCombo extends Widget { + static xtype = "bi.multilayer_single_tree_combo"; + + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-single-tree-combo", isDefaultInit: false, height: 24, text: "", defaultText: "", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], allowEdit: false, allowSearchValue: false, allowInsertValue: false, isNeedAdjustWidth: true, }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const self = this, + o = this.options; - var cls = (o.simple ? "bi-border-bottom bi-focus-shadow " : "bi-border bi-border-radius bi-focus-shadow ") + (BI.isKey(o.status) ? ("status-" + o.status) : ""); + const cls = + (o.simple ? "bi-border-bottom bi-focus-shadow " : "bi-border bi-border-radius bi-focus-shadow ") + + (isKey(o.status) ? `status-${o.status}` : ""); - var baseConfig = this._getBaseConfig(); + const baseConfig = this._getBaseConfig(); if (o.allowEdit) { return { - type: "bi.absolute", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + type: AbsoluteLayout.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), cls, items: [ { - el: BI.extend(baseConfig, this._getSearchConfig()), - top: 0, bottom: 0, right: 0, left: 0 - }, { - el: self._getTriggerIconButton(), - top: 0, bottom: 0, right: 0, + el: extend(baseConfig, this._getSearchConfig()), + top: 0, + bottom: 0, + right: 0, + left: 0, }, - ] + { + el: self._getTriggerIconButton(), + top: 0, + bottom: 0, + right: 0, + } + ], }; } - return BI.extend(baseConfig, { - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), - el: { - type: "bi.single_tree_trigger", - ref: function (_ref) { - self.textTrigger = _ref; + return extend( + baseConfig, + { + width: toPix(o.width, 2), + height: toPix(o.height, 2), + el: { + type: SingleTreeTrigger.xtype, + ref (_ref) { + self.textTrigger = _ref; + }, + text: o.text, + defaultText: o.defaultText, + height: toPix(o.height, 2), + items: o.items, + value: o.value, + tipType: o.tipType, + warningTitle: o.warningTitle, + valueFormatter: o.valueFormatter, }, - text: o.text, - defaultText: o.defaultText, - height: BI.toPix(o.height, 2), - items: o.items, - value: o.value, - tipType: o.tipType, - warningTitle: o.warningTitle, - valueFormatter: o.valueFormatter, }, - }, { cls }); - }, + { cls } + ); + } - _getBaseConfig: function () { - var self = this, o = this.options; + _getBaseConfig() { + const self = this, + o = this.options; + return { - type: "bi.combo", + type: Combo.xtype, container: o.container, destroyWhenHide: o.destroyWhenHide, adjustLength: 2, - ref: function (_ref) { + ref (_ref) { self.combo = _ref; }, popup: { @@ -84,41 +108,47 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { isDefaultInit: o.isDefaultInit, itemsCreator: o.itemsCreator, items: o.items, - ref: function (_ref) { + ref (_ref) { self.trigger && self.trigger.getSearcher().setAdapter(_ref); }, - listeners: [{ - eventName: BI.MultiLayerSingleTreePopup.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); + listeners: [ + { + eventName: MultiLayerSingleTreePopup.EVENT_CHANGE, + action () { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); + }, } - }], - onLoaded: function () { - BI.nextTick(function () { + ], + onLoaded () { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); }); - } + }, }, value: o.value, maxHeight: 400, maxWidth: o.isNeedAdjustWidth ? "auto" : 500, - minHeight: 240 + minHeight: 240, }, isNeedAdjustWidth: o.isNeedAdjustWidth, - listeners: [{ - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + }, } - }] + ], }; - }, + } - _getSearchConfig: function () { - var self = this, o = this.options; + _getSearchConfig() { + const self = this, + o = this.options; + return { el: { type: "bi.multilayer_single_tree_trigger", @@ -126,154 +156,162 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { allowInsertValue: o.allowInsertValue, allowSearchValue: o.allowSearchValue, cls: "multilayer-single-tree-trigger", - ref: function (_ref) { + ref (_ref) { self.trigger = _ref; }, watermark: o.watermark, items: o.items, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), text: o.text, defaultText: o.defaultText, value: o.value, tipType: o.tipType, warningTitle: o.warningTitle, title: o.title, - listeners: [{ - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_FOCUS); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BLUR); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_STOP, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_STOP); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM, - action: function () { - var value = self.trigger.getSearcher().getKeyword(); - self.combo.setValue([value]); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); + listeners: [ + { + eventName: MultiLayerSingleTreeTrigger.EVENT_CHANGE, + action () { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_FOCUS, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_FOCUS); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_BLUR, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BLUR); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_SEARCHING, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_SEARCHING); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_STOP, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_STOP); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM, + action () { + const value = self.trigger.getSearcher().getKeyword(); + self.combo.setValue([value]); + self.combo.hideView(); + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); + }, } - }] + ], }, toggle: !o.allowEdit, - hideChecker: function (e) { + hideChecker (e) { // 新增传配置container后对应hideChecker的修改 // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 - return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn?.element.find(e.target).length === 0; + return o.container && + self.trigger.getSearcher().isSearching() && + self.trigger.getSearcher().getView().element.find(e.target).length > 0 + ? false + : self.triggerBtn?.element.find(e.target).length === 0; }, - listeners: [{ - eventName: BI.Combo.EVENT_AFTER_HIDEVIEW, - action: function () { - self.trigger.stopEditing(); - } - }, { - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_AFTER_HIDEVIEW, + action () { + self.trigger.stopEditing(); + }, + }, + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action () { + self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + }, } - }] + ], }; - }, + } - _getTriggerIconButton: function () { - var self = this, o = this.options; + _getTriggerIconButton() { + const self = this, + o = this.options; + return { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, cls: "bi-trigger trigger-icon-button", - ref: function (_ref) { + ref (_ref) { self.triggerBtn = _ref; }, - width: BI.toPix(o.height, 2), - height: BI.toPix(o.height, 2), + width: toPix(o.height, 2), + height: toPix(o.height, 2), listeners: [ { - eventName: BI.TriggerIconButton.EVENT_CHANGE, - action: function () { + eventName: TriggerIconButton.EVENT_CHANGE, + action () { if (self.combo.isViewVisible()) { self.combo.hideView(); } else { self.combo.showView(); } - } + }, } - ] + ], }; - }, + } - getSearcher: function () { + getSearcher() { return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.combo.setValue(v); - }, + } - getValue: function () { + getValue() { return this.combo.getValue(); - }, + } - setStatus: function (status) { - if (BI.isKey(this.options.status)) { - this.element.removeClass("status-" + this.options.status); + setStatus(status) { + if (isKey(this.options.status)) { + this.element.removeClass(`status-${this.options.status}`); } - this.element.addClass("status-" + status); + this.element.addClass(`status-${status}`); this.options.status = status; - }, + } - setTipType: function (v) { + setTipType(v) { this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); - }, + } - populate: function (items) { + populate(items) { this.combo.populate(items); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSingleTreeCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSingleTreeCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSingleTreeCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.multilayer_single_tree_combo", BI.MultiLayerSingleTreeCombo); +} diff --git a/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js b/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js index 8e7fa06de..78b07ea5b 100644 --- a/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js +++ b/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js @@ -1,92 +1,110 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreeInsertSearchPane - * @extends BI.Pane - */ +import { + shortcut, + Widget, + i18nText, + emptyFn, + createWidget, + Controller, + VerticalLayout, + isEmptyArray, + isArray +} from "@/core"; +import { MultiLayerSelectLevelTree } from "../multilayerselecttree/multilayerselecttree.leveltree"; +import { TextButton } from "@/base"; -BI.MultiLayerSingleTreeInsertSearchPane = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSingleTreeInsertSearchPane extends Widget { + static xtype = "bi.multilayer_single_tree_insert_search_pane"; - props: function() { + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + props() { return { baseCls: "bi-multilayer-single-tree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], - value: "" + value: "", }; - }, + } - render: function() { - var self = this, o = this.options; - this.tree = BI.createWidget({ + render() { + const o = this.options; + this.tree = createWidget({ type: "bi.multilayer_single_level_tree", isDefaultInit: o.isDefaultInit, items: o.items, - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - o.itemsCreator(op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }); - }, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : (op, callback) => { + o.itemsCreator(op, res => { + callback(res); + this.setKeyword(o.keywordGetter()); + }); + }, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.MultiLayerSelectLevelTree.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, + }, + { + eventName: MultiLayerSelectLevelTree.EVENT_CHANGE, + action: () => { + this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); + }, } - }] + ], }); + return { - type: "bi.vertical", + type: VerticalLayout.xtype, scrolly: false, scrollable: true, vgap: 5, - items: [{ - type: "bi.text_button", - invisible: true, - text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), - height: 24, - cls: "bi-high-light", - hgap: 5, - ref: function (_ref) { - self.addNotMatchTip = _ref; + items: [ + { + type: TextButton.xtype, + invisible: true, + text: i18nText("BI-Basic_Click_To_Add_Text", ""), + height: 24, + cls: "bi-high-light", + hgap: 5, + ref: _ref => { + this.addNotMatchTip = _ref; + }, + handler: () => { + this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); + }, }, - handler: function () { - self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); - } - }, this.tree] + this.tree + ], }; - }, + } - setKeyword: function (keyword) { - var showTip = BI.isEmptyArray(this.tree.getAllLeaves()); + setKeyword(keyword) { + const showTip = isEmptyArray(this.tree.getAllLeaves()); this.addNotMatchTip.setVisible(showTip); - showTip && this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); - }, + showTip && this.addNotMatchTip.setText(i18nText("BI-Basic_Click_To_Add_Text", keyword)); + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, + } - populate: function (items) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_single_tree_insert_search_pane", BI.MultiLayerSingleTreeInsertSearchPane); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/multilayersingletree.leveltree.js b/src/widget/multilayersingletree/multilayersingletree.leveltree.js index 8e14aa749..3e6a05433 100644 --- a/src/widget/multilayersingletree/multilayersingletree.leveltree.js +++ b/src/widget/multilayersingletree/multilayersingletree.leveltree.js @@ -1,170 +1,202 @@ -/** - * guy - * 二级树 - * @class BI.MultiLayerSingleLevelTree - * @extends BI.Single - */ -BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleLevelTree.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + Selection, + each, + isKey, + UUID, + isNotEmptyArray, + defaults, + createWidget, + Tree, + nextTick, + Controller, + Events, + VerticalLayout, + AdaptiveLayout, + isNull, + isArray +} from "@/core"; +import { Pane, CustomTree, Loader, ButtonTree } from "@/base"; +import { BasicTreeNode, BasicTreeItem, TreeExpander } from "@/case"; + +@shortcut() +export class MultiLayerSingleLevelTree extends Pane { + static xtype = "bi.multilayer_single_level_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-single-level-tree", isDefaultInit: false, items: [], - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - chooseType: BI.Selection.Single, - scrollable: true + itemsCreator: emptyFn, + keywordGetter: emptyFn, + chooseType: Selection.Single, + scrollable: true, }); - }, + } - _init: function () { - var o = this.options; - BI.MultiLayerSingleLevelTree.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); this.storeValue = o.value; this.initTree(this.options.items); this.check(); - }, + } - _formatItems: function (nodes, layer, pNode) { - var self = this, o = this.options; - var keyword = o.keywordGetter(); - BI.each(nodes, function (i, node) { - var extend = { + _formatItems(nodes, layer, pNode) { + const self = this, + o = this.options; + const keyword = o.keywordGetter(); + each(nodes, (i, node) => { + const extend = { isFirstNode: i === 0, isLastNode: i === nodes.length - 1, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }; node.layer = layer; - if (!BI.isKey(node.id)) { - node.id = BI.UUID(); + if (!isKey(node.id)) { + node.id = UUID(); } node.keyword = node.keyword || keyword; extend.pNode = pNode; - if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { - extend.type = "bi.tree_node"; + if (node.isParent === true || node.parent === true || isNotEmptyArray(node.children)) { + extend.type = BasicTreeNode.xtype; extend.selectable = false; - BI.defaults(node, extend); + defaults(node, extend); self._formatItems(node.children, layer + 1, node); } else { - extend.type = "bi.tree_item"; - BI.defaults(node, extend); + extend.type = BasicTreeItem.xtype; + defaults(node, extend); } }); + return nodes; - }, + } - _assertId: function (sNodes) { - BI.each(sNodes, function (i, node) { - node.id = node.id || BI.UUID(); + _assertId(sNodes) { + each(sNodes, (i, node) => { + node.id = node.id || UUID(); }); - }, + } - // 构造树结构， - initTree: function (nodes) { - var self = this, o = this.options; - var hasNext = false; + initTree(nodes) { + const self = this, + o = this.options; + let hasNext = false; this.empty(); this._assertId(nodes); - this.tree = BI.createWidget({ - type: "bi.custom_tree", + this.tree = createWidget({ + type: CustomTree.xtype, cls: "tree-view display-table", expander: { - type: "bi.tree_expander", + type: TreeExpander.xtype, isDefaultInit: o.isDefaultInit, el: {}, popup: { - type: "bi.custom_tree" - } + type: CustomTree.xtype, + }, }, - items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), + items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), value: o.value, - itemsCreator: function (op, callback) { - (op.times === 1 && !op.node) && BI.nextTick(function () { - self.loading(); - }); - o.itemsCreator(op, function (ob) { + itemsCreator (op, callback) { + op.times === 1 && + !op.node && + nextTick(() => { + self.loading(); + }); + o.itemsCreator(op, ob => { hasNext = ob.hasNext; - (op.times === 1 && !op.node) && self._populate(ob.items); - callback(self._formatItems(BI.Tree.transformToTreeFormat(ob.items), op.node ? op.node.layer + 1 : 0, op.node)); + op.times === 1 && !op.node && self._populate(ob.items); + callback( + self._formatItems( + Tree.transformToTreeFormat(ob.items), + op.node ? op.node.layer + 1 : 0, + op.node + ) + ); self.setValue(self.storeValue); - (op.times === 1 && !op.node) && BI.nextTick(function () { - self.loaded(); - }); + op.times === 1 && + !op.node && + nextTick(() => { + self.loaded(); + }); }); }, el: { - type: "bi.loader", - isDefaultInit: o.itemsCreator !== BI.emptyFn, + type: Loader.xtype, + isDefaultInit: o.itemsCreator !== emptyFn, el: { - type: "bi.button_tree", - chooseType: o.chooseType === BI.Selection.None ? BI.Selection.None : BI.Selection.Default, // 不使用buttontree内部getValue逻辑 + type: ButtonTree.xtype, + chooseType: o.chooseType === Selection.None ? Selection.None : Selection.Default, // 不使用buttontree内部getValue逻辑 behaviors: o.behaviors, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }, - hasNext: function () { + hasNext () { return hasNext; - } - } + }, + }, }); - this.tree.on(BI.Controller.EVENT_CHANGE, function (type, v) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { + this.tree.on(Controller.EVENT_CHANGE, function (type, v) { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + if (type === Events.CLICK) { self.setValue(v); - self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, v); + self.fireEvent(MultiLayerSingleLevelTree.EVENT_CHANGE, v); } }); - BI.createWidget({ - type: "bi.adaptive", + createWidget({ + type: AdaptiveLayout.xtype, element: this, scrollable: o.scrollable, - items: [this.tree] + items: [this.tree], }); - }, + } - _populate: function () { - BI.MultiLayerSelectLevelTree.superclass.populate.apply(this, arguments); - }, + _populate() { + super.populate(...arguments); + } - populate: function (nodes) { + populate(nodes) { this._populate(nodes); - BI.isNull(nodes) ? this.tree.populate() : this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0)); - }, + isNull(nodes) + ? this.tree.populate() + : this.tree.populate(this._formatItems(Tree.transformToTreeFormat(nodes), 0)); + } - setValue: function (v) { + setValue(v) { // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了 - if (this.options.chooseType === BI.Selection.None) { - } else { + if (this.options.chooseType !== Selection.None) { this.storeValue = v; this.tree.setValue(v); } - }, + } - getValue: function () { - return BI.isArray(this.storeValue) ? - this.storeValue : BI.isNull(this.storeValue) ? - [] : [this.storeValue]; - }, + getValue() { + return isArray(this.storeValue) ? this.storeValue : isNull(this.storeValue) ? [] : [this.storeValue]; + } - getAllLeaves: function () { + getAllLeaves() { return this.tree.getAllLeaves(); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.tree.getNodeById(id); - }, + } - getNodeByValue: function (id) { + getNodeByValue(id) { return this.tree.getNodeByValue(id); } -}); -BI.MultiLayerSingleLevelTree.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.multilayer_single_level_tree", BI.MultiLayerSingleLevelTree); +} diff --git a/src/widget/multilayersingletree/multilayersingletree.popup.js b/src/widget/multilayersingletree/multilayersingletree.popup.js index 630c38237..244786fba 100644 --- a/src/widget/multilayersingletree/multilayersingletree.popup.js +++ b/src/widget/multilayersingletree/multilayersingletree.popup.js @@ -1,76 +1,73 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreePopup - * @extends BI.Pane - */ +import { shortcut, Widget, extend, i18nText, emptyFn, createWidget, Controller, VerticalLayout, isArray, pixFormat } from "@/core"; +import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; -BI.MultiLayerSingleTreePopup = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSingleTreePopup extends Widget { + static xtype = "bi.multilayer_single_tree_popup"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreePopup.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-singletree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], - onLoaded: BI.emptyFn, - minHeight: 240 + onLoaded: emptyFn, + minHeight: 240, }); - }, + } - _init: function () { - BI.MultiLayerSingleTreePopup.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const o = this.options; - this.tree = BI.createWidget({ - type: "bi.multilayer_single_level_tree", + this.tree = createWidget({ + type: MultiLayerSingleLevelTree.xtype, isDefaultInit: o.isDefaultInit, items: o.items, itemsCreator: o.itemsCreator, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - onLoaded: function () { - self.tree.check(); + onLoaded: () => { + this.tree.check(); o.onLoaded(); - } + }, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, scrolly: false, scrollable: true, element: this, vgap: 5, - items: [this.tree] + items: [this.tree], }); - this.tree.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.tree.on(Controller.EVENT_CHANGE, (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - this.tree.on(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiLayerSingleTreePopup.EVENT_CHANGE); + this.tree.on(MultiLayerSingleLevelTree.EVENT_CHANGE, () => { + this.fireEvent(MultiLayerSingleTreePopup.EVENT_CHANGE); }); - this.tree.css("min-height", BI.pixFormat(o.minHeight - 10)); - }, + this.tree.css("min-height", pixFormat(o.minHeight - 10)); + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, + } - populate: function (items) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSingleTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_single_tree_popup", BI.MultiLayerSingleTreePopup); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/multilayersingletree.trigger.js b/src/widget/multilayersingletree/multilayersingletree.trigger.js index 617c70d7b..d6c5ebda2 100644 --- a/src/widget/multilayersingletree/multilayersingletree.trigger.js +++ b/src/widget/multilayersingletree/multilayersingletree.trigger.js @@ -1,237 +1,282 @@ -/** - * Created by Windy on 2018/2/2. - */ -BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, { +import { + shortcut, + emptyFn, + i18nText, + bind, + isNotNull, + isKey, + HorizontalFillLayout, + Tree, + deepClone, + Func, + concat, + isNotEmptyArray, + each, + uniqBy, + map, + isFunction, + find +} from "@/core"; +import { Trigger, Searcher } from "@/base"; +import { StateEditor, DefaultTextEditor } from "@/case"; +import { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.insert.search.pane"; +import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; - props: function () { +@shortcut() +export class MultiLayerSingleTreeTrigger extends Trigger { + static xtype = "bi.multilayer_single_tree_trigger"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_START = "EVENT_START"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + + props() { return { extraCls: "bi-multi-layer-single-tree-trigger", height: 24, - itemsCreator: BI.emptyFn, - watermark: BI.i18nText("BI-Basic_Search"), + itemsCreator: emptyFn, + watermark: i18nText("BI-Basic_Search"), allowSearchValue: false, - title: BI.bind(this._getShowText, this) + title: bind(this._getShowText, this), }; - }, + } - render: function () { - var self = this, o = this.options; - if (o.itemsCreator === BI.emptyFn) { + render() { + const self = this, + o = this.options; + if (o.itemsCreator === emptyFn) { this._initData(); } return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, items: [ { el: { - type: "bi.searcher", - ref: function () { + type: Searcher.xtype, + ref () { self.searcher = this; }, - masker: BI.isNotNull(o.container) ? { - offset: {}, - container: o.container - } : { - offset: {} - }, + masker: isNotNull(o.container) + ? { + offset: {}, + container: o.container, + } + : { + offset: {}, + }, isAutoSearch: false, el: { - type: "bi.default_text_editor", - ref: function () { + type: DefaultTextEditor.xtype, + ref () { self.editor = this; }, defaultText: o.defaultText, - text: BI.isKey(o.value) ? this._digest(o.value) : o.text, + text: isKey(o.value) ? this._digest(o.value) : o.text, value: o.value, height: o.height, tipText: "", watermark: o.watermark, - listeners: [{ - eventName: BI.StateEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS); - } - }, { - eventName: BI.StateEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_BLUR); + listeners: [ + { + eventName: StateEditor.EVENT_FOCUS, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_FOCUS); + }, + }, + { + eventName: StateEditor.EVENT_BLUR, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_BLUR); + }, + }, + { + eventName: StateEditor.EVENT_CHANGE, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_SEARCHING); + }, } - }, { - eventName: BI.StateEditor.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING); - } - }] + ], }, popup: { - type: o.allowInsertValue ? "bi.multilayer_single_tree_insert_search_pane" : "bi.multilayer_single_tree_popup", - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - keywordGetter: function () { + type: o.allowInsertValue + ? MultiLayerSingleTreeInsertSearchPane.xtype + : MultiLayerSingleTreePopup.xtype, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : function (op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + keywordGetter () { return self.editor.getValue(); }, cls: "bi-card", - listeners: [{ - eventName: BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, - action: function () { - self.options.text = self.getSearcher().getKeyword(); - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); + listeners: [ + { + eventName: MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, + action () { + self.options.text = self.getSearcher().getKeyword(); + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); + }, } - }], - ref: function (_ref) { + ], + ref (_ref) { self.popup = _ref; - } + }, }, - onSearch: function (obj, callback) { - var keyword = obj.keyword; - if (o.itemsCreator === BI.emptyFn) { + onSearch (obj, callback) { + const keyword = obj.keyword; + if (o.itemsCreator === emptyFn) { callback(self._getSearchItems(keyword)); o.allowInsertValue && self.popup.setKeyword(keyword); } else { callback(); } }, - listeners: [{ - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_CHANGE, + action () { + self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_CHANGE); + }, } - }] + ], }, width: "fill", rgap: 24, - }, - ] + } + ], }; - }, + } - _initData: function () { - var o = this.options; - this.tree = new BI.Tree(); - this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); + _initData() { + const o = this.options; + this.tree = new Tree(); + this.nodes = Tree.treeFormat(deepClone(o.items)); this.tree.initTree(this.nodes); - }, + } - _getSearchItems: function (keyword) { - var self = this, o = this.options; + _getSearchItems(keyword) { + const self = this, + o = this.options; // 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索 - var items = []; - this.tree.traverse(function (node) { - var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); + const items = []; + this.tree.traverse(node => { + const find = Func.getSearchResult( + self.tree.isRoot(node) ? [] : concat([node.text], o.allowSearchValue ? [node.value] : []), + keyword + ); if (find.find.length > 0 || find.match.length > 0) { items.push(node); + return true; } }); + return this._fillTreeStructure4Search(items, "id"); - }, + } - _createJson: function (node, open) { + _createJson(node, open) { return { id: node.id, pId: node.pId, text: node.text, value: node.value, - isParent: BI.isNotEmptyArray(node.children), - open: open + isParent: isNotEmptyArray(node.children), + open, }; - }, + } - _getChildren: function (node) { - var self = this; + _getChildren(node) { + const self = this; node.children = node.children || []; - var nodes = []; - BI.each(node.children, function (idx, child) { - var children = self._getChildren(child); + let nodes = []; + each(node.children, (idx, child) => { + const children = self._getChildren(child); nodes = nodes.concat(children); }); + return node.children.concat(nodes); - }, - - // 将搜索到的节点进行补充，构造成一棵完整的树 - _fillTreeStructure4Search: function (leaves) { - var self = this; - var result = []; - var queue = []; - BI.each(leaves, function (idx, node) { + } + + _fillTreeStructure4Search(leaves) { + const self = this; + let result = []; + const queue = []; + each(leaves, (idx, node) => { queue.push({ pId: node.pId }); result.push(node); result = result.concat(self._getChildren(node)); }); queue.reverse(); - while (BI.isNotEmptyArray(queue)) { - var node = queue.pop(); - var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); + while (isNotEmptyArray(queue)) { + const node = queue.pop(); + const pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); if (pNode != null) { pNode.open = true; queue.push({ pId: pNode.pId }); result.push(pNode); } } - return BI.uniqBy(BI.map(result, function (idx, node) { - return self._createJson(node, node.open); - }), "id"); - }, + + return uniqBy( + map(result, (idx, node) => self._createJson(node, node.open)), + "id" + ); + } - _digest: function (v) { - var o = this.options; + _digest(v) { + const o = this.options; - if (BI.isFunction(o.valueFormatter)) { + if (isFunction(o.valueFormatter)) { return o.valueFormatter(v); } - var result = BI.find(o.items, function (i, item) { - return item.value === v; - }); + const result = find(o.items, (i, item) => item.value === v); - return BI.isNotNull(result) ? result.text : (o.text ?? v); - }, + return isNotNull(result) ? result.text : o.text ?? v; + } - _getShowText: function () { + _getShowText() { return this.editor.getText(); - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - populate: function (items) { + populate(items) { this.options.items = items; this._initData(); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setState(this._digest(v[0])); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); - }, + } - focus: function () { + focus() { this.searcher.focus(); - }, + } - blur: function () { + blur() { this.searcher.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.searcher.setWaterMark(v); } -}); -BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSingleTreeTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSingleTreeTrigger.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSingleTreeTrigger.EVENT_START = "EVENT_START"; -BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.shortcut("bi.multilayer_single_tree_trigger", BI.MultiLayerSingleTreeTrigger); +} diff --git a/src/widget/multilayersingletree/node/index.js b/src/widget/multilayersingletree/node/index.js new file mode 100644 index 000000000..25a92c14a --- /dev/null +++ b/src/widget/multilayersingletree/node/index.js @@ -0,0 +1,4 @@ +export { MultiLayerSingleTreeFirstPlusGroupNode } from "./node.first.plus"; +export { MultiLayerSingleTreeLastPlusGroupNode } from "./node.last.plus"; +export { MultiLayerSingleTreeMidPlusGroupNode } from "./node.mid.plus"; +export { MultiLayerSingleTreePlusGroupNode } from "./node.plus"; diff --git a/src/widget/multilayersingletree/node/node.first.plus.js b/src/widget/multilayersingletree/node/node.first.plus.js index 51177bcce..07e767331 100644 --- a/src/widget/multilayersingletree/node/node.first.plus.js +++ b/src/widget/multilayersingletree/node/node.first.plus.js @@ -1,69 +1,80 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeFirstPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + createWidget, + makeArray, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { FirstPlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreeFirstPlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_first_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-first-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var items = []; + const items = []; items.push({ el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.first_plus_group_node", + return createWidget({ + type: FirstPlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -75,17 +86,19 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_first_plus_group_node", BI.MultiLayerSingleTreeFirstPlusGroupNode); +} diff --git a/src/widget/multilayersingletree/node/node.last.plus.js b/src/widget/multilayersingletree/node/node.last.plus.js index 007837f5c..907dd71f8 100644 --- a/src/widget/multilayersingletree/node/node.last.plus.js +++ b/src/widget/multilayersingletree/node/node.last.plus.js @@ -1,69 +1,80 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeLastPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + createWidget, + makeArray, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { LastPlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreeLastPlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_last_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-last-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var items = []; + const items = []; items.push({ el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.last_plus_group_node", + return createWidget({ + type: LastPlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -74,17 +85,19 @@ BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_last_plus_group_node", BI.MultiLayerSingleTreeLastPlusGroupNode); +} diff --git a/src/widget/multilayersingletree/node/node.mid.plus.js b/src/widget/multilayersingletree/node/node.mid.plus.js index e8709cf78..f051ec2fe 100644 --- a/src/widget/multilayersingletree/node/node.mid.plus.js +++ b/src/widget/multilayersingletree/node/node.mid.plus.js @@ -1,69 +1,80 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeMidPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + createWidget, + makeArray, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { MidPlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreeMidPlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_mid_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-mid-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var items = []; + const items = []; items.push({ el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, 12), - items: items + columnSize: makeArray(o.layer, 12), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.mid_plus_group_node", + return createWidget({ + type: MidPlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -74,17 +85,19 @@ BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_mid_plus_group_node", BI.MultiLayerSingleTreeMidPlusGroupNode); +} diff --git a/src/widget/multilayersingletree/node/node.plus.js b/src/widget/multilayersingletree/node/node.plus.js index bcff49737..24eebd83e 100644 --- a/src/widget/multilayersingletree/node/node.plus.js +++ b/src/widget/multilayersingletree/node/node.plus.js @@ -1,80 +1,96 @@ -/** - *@desc 根节点,既是第一个又是最后一个 - *@author dailer - *@date 2018/09/16 - */ -BI.MultiLayerSingleTreePlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { + shortcut, + extend, + count, + contains, + createWidget, + makeArray, + Layout, + HorizontalAdaptLayout, + isNotNull, + Controller, + Events +} from "@/core"; +import { NodeButton } from "@/base"; +import { PlusGroupNode } from "@/case"; + +@shortcut() +export class MultiLayerSingleTreePlusGroupNode extends NodeButton { + static xtype = "bi.multilayer_single_tree_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { extraCls: "bi-multilayer-single-tree-plus-group-node bi-list-item", layer: 0, // 第几层级 id: "", pId: "", open: false, - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreePlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this.node = this._createNode(); - var needBlankLayers = []; - var pNode = o.pNode; + const needBlankLayers = []; + let pNode = o.pNode; while (pNode) { if (pNode.isLastNode) { - needBlankLayers.push(pNode.layer) + needBlankLayers.push(pNode.layer); } pNode = pNode.pNode; } - var items = []; - BI.count(0, o.layer, function (index) { + const items = []; + count(0, o.layer, index => { items.push({ - type: "bi.layout", - cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", + type: Layout.xtype, + cls: contains(needBlankLayers, index) ? "" : "base-line-conn-background", width: 12, - height: o.height + height: o.height, }); }); items.push(this.node); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, 12), - items: items + columnSize: makeArray(o.layer, 12), + items, }); - }, + } - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, + doRedMark() { + this.node.doRedMark(...arguments); + } - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, + unRedMark() { + this.node.unRedMark(...arguments); + } - doClick: function () { - BI.MultiLayerSingleTreePlusGroupNode.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.node.setSelected(this.isSelected()); - }, + } - setOpened: function (v) { - BI.MultiLayerSingleTreePlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { + setOpened(v) { + super.setOpened(...arguments); + if (isNotNull(this.node)) { this.node.setOpened(v); } - }, + } - _createNode: function () { - var self = this, o = this.options; + _createNode() { + const o = this.options; - return BI.createWidget({ - type: "bi.plus_group_node", + return createWidget({ + type: PlusGroupNode.xtype, cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -86,17 +102,19 @@ BI.MultiLayerSingleTreePlusGroupNode = BI.inherit(BI.NodeButton, { value: o.value, py: o.py, keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + const [type] = args; + if (type === Events.CLICK) { + // 本身实现click功能 + return; + } + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, } - }] + ], }); } -}); - -BI.shortcut("bi.multilayer_single_tree_plus_group_node", BI.MultiLayerSingleTreePlusGroupNode); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/treeitem/index.js b/src/widget/multilayersingletree/treeitem/index.js new file mode 100644 index 000000000..ce4dc8b6c --- /dev/null +++ b/src/widget/multilayersingletree/treeitem/index.js @@ -0,0 +1,3 @@ +export { MultiLayerSingleTreeFirstTreeLeafItem } from "./item.first.treeleaf"; +export { MultiLayerSingleTreeLastTreeLeafItem } from "./item.last.treeleaf"; +export { MultiLayerSingleTreeMidTreeLeafItem } from "./item.mid.treeleaf"; diff --git a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js index 4cc5203e4..469d215d0 100644 --- a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js +++ b/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js @@ -1,30 +1,32 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeFirstTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class MultiLayerSingleTreeFirstTreeLeafItem extends BasicButton { + static xtype = "bi.multilayer_single_tree_first_tree_leaf_item"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-single-tree-first-tree-leaf-item bi-list-item-active", logic: { - dynamic: false + dynamic: false, }, layer: 0, id: "", pId: "", - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.item = createWidget({ type: "bi.first_tree_leaf_item", cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -33,54 +35,53 @@ BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, { text: o.text, value: o.value, py: o.py, - keyword: o.keyword + keyword: o.keyword, }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 + this.item.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { + // 本身实现click功能 return; } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - var items = []; + const items = []; items.push({ el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, + doHighLight() { + this.item.doHighLight(...arguments); + } - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, + unHighLight() { + this.item.unHighLight(...arguments); + } - getId: function () { + getId() { return this.options.id; - }, + } - getPId: function () { + getPId() { return this.options.pId; - }, + } - doClick: function () { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.item.setSelected(this.isSelected()); - }, + } - setSelected: function (v) { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass.setSelected.apply(this, arguments); + setSelected(v) { + super.setSelected(...arguments); this.item.setSelected(v); } -}); - -BI.shortcut("bi.multilayer_single_tree_first_tree_leaf_item", BI.MultiLayerSingleTreeFirstTreeLeafItem); +} diff --git a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js index 9aa604737..f4ca73929 100644 --- a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js +++ b/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js @@ -1,30 +1,32 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeLastTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeLastTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class MultiLayerSingleTreeLastTreeLeafItem extends BasicButton { + static xtype = "bi.multilayer_single_tree_last_tree_leaf_item"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-single-tree-last-tree-leaf-item bi-list-item-active", logic: { - dynamic: false + dynamic: false, }, layer: 0, id: "", pId: "", - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.item = createWidget({ type: "bi.last_tree_leaf_item", cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -33,54 +35,53 @@ BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, { text: o.text, value: o.value, py: o.py, - keyword: o.keyword + keyword: o.keyword, }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 + this.item.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { + // 本身实现click功能 return; } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - var items = []; + const items = []; items.push({ el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, + doHighLight() { + this.item.doHighLight(...arguments); + } - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, + unHighLight() { + this.item.unHighLight(...arguments); + } - getId: function () { + getId() { return this.options.id; - }, + } - getPId: function () { + getPId() { return this.options.pId; - }, + } - doClick: function () { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.item.setSelected(this.isSelected()); - }, + } - setSelected: function (v) { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass.setSelected.apply(this, arguments); + setSelected(v) { + super.setSelected(...arguments); this.item.setSelected(v); } -}); - -BI.shortcut("bi.multilayer_single_tree_last_tree_leaf_item", BI.MultiLayerSingleTreeLastTreeLeafItem); +} diff --git a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js index eed7d553c..527dac46a 100644 --- a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js +++ b/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js @@ -1,30 +1,32 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeMidTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeMidTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core"; +import { BasicButton } from "@/base"; + +@shortcut() +export class MultiLayerSingleTreeMidTreeLeafItem extends BasicButton { + static xtype = "bi.multilayer_single_tree_mid_tree_leaf_item"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-single-tree-mid-tree-leaf-item bi-list-item-active", logic: { - dynamic: false + dynamic: false, }, layer: 0, id: "", pId: "", - height: 24 + height: 24, }); - }, - _init: function () { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const self = this, + o = this.options; + this.item = createWidget({ type: "bi.mid_tree_leaf_item", cls: "bi-list-item-none", logic: { - dynamic: true + dynamic: true, }, id: o.id, pId: o.pId, @@ -33,54 +35,53 @@ BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, { text: o.text, value: o.value, py: o.py, - keyword: o.keyword + keyword: o.keyword, }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 + this.item.on(Controller.EVENT_CHANGE, function (type) { + if (type === Events.CLICK) { + // 本身实现click功能 return; } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + self.fireEvent(Controller.EVENT_CHANGE, arguments); }); - var items = []; + const items = []; items.push({ el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, }); - BI.createWidget({ - type: "bi.horizontal_adapt", + createWidget({ + type: HorizontalAdaptLayout.xtype, element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items + columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), + items, }); - }, + } - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, + doHighLight() { + this.item.doHighLight(...arguments); + } - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, + unHighLight() { + this.item.unHighLight(...arguments); + } - getId: function () { + getId() { return this.options.id; - }, + } - getPId: function () { + getPId() { return this.options.pId; - }, + } - doClick: function () { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass.doClick.apply(this, arguments); + doClick() { + super.doClick(...arguments); this.item.setSelected(this.isSelected()); - }, + } - setSelected: function (v) { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass.setSelected.apply(this, arguments); + setSelected(v) { + super.setSelected(...arguments); this.item.setSelected(v); } -}); - -BI.shortcut("bi.multilayer_single_tree_mid_tree_leaf_item", BI.MultiLayerSingleTreeMidTreeLeafItem); +}