From ab2eb1f99678431adfa393c12f274263afd9445f Mon Sep 17 00:00:00 2001 From: "crawford.zhou" Date: Fri, 13 Jan 2023 15:11:19 +0800 Subject: [PATCH 1/6] =?UTF-8?q?KERNEL-14105=20feat:searchmultitextvaluecom?= =?UTF-8?q?bo=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 | 3 + src/widget/multiselect/index.js | 6 + src/widget/searchmultitextvaluecombo/index.js | 5 + .../multitextvalue.combo.search.js | 648 +++++++++--------- .../multitextvalue.combo.trigger.search.js | 189 ++--- .../multitextvalue.loader.search.js | 238 ++++--- .../multitextvalue.popup.view.search.js | 112 +-- .../trigger/searcher.multitextvalue.js | 200 +++--- 8 files changed, 748 insertions(+), 653 deletions(-) create mode 100644 src/widget/searchmultitextvaluecombo/index.js diff --git a/src/widget/index.js b/src/widget/index.js index 2deb239a7..0d3a9cb59 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -25,6 +25,7 @@ import * as singleselect from "./singleselect"; import * as multilayerdownlist from "./multilayerdownlist"; import * as multilayersingletree from "./multilayersingletree"; +import * as searchmultitextvaluecombo from "./searchmultitextvaluecombo"; Object.assign(BI, { Collapse, ...calendar, @@ -52,6 +53,7 @@ Object.assign(BI, { ...singleselect, ...multilayerdownlist, ...multilayersingletree, + ...searchmultitextvaluecombo, }); export * from "./date/calendar"; @@ -68,6 +70,7 @@ export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; export * from "./year"; +export * from "./searchmultitextvaluecombo"; export * from "./singleselect"; export * from "./multilayerdownlist"; export * from "./multilayersingletree"; diff --git a/src/widget/multiselect/index.js b/src/widget/multiselect/index.js index 9e0934c14..9236080dd 100644 --- a/src/widget/multiselect/index.js +++ b/src/widget/multiselect/index.js @@ -1,3 +1,9 @@ +export { MultiSelectSearchPane } from "./search/multiselect.search.pane"; +export { MultiSelectEditor } from "./trigger/editor.multiselect"; +export { MultiSelectTrigger } from "./multiselect.trigger"; +export { MultiSelectPopupView } from "./multiselect.popup.view"; +export { MultiSelectSearcher } from "./trigger/searcher.multiselect"; +export { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected"; export { MultiSelectCombo } from "./multiselect.combo"; export { MultiSelectNoBarCombo } from "./multiselect.combo.nobar"; export { MultiSelectInsertCombo } from "./multiselect.insert.combo"; diff --git a/src/widget/searchmultitextvaluecombo/index.js b/src/widget/searchmultitextvaluecombo/index.js new file mode 100644 index 000000000..1e711286d --- /dev/null +++ b/src/widget/searchmultitextvaluecombo/index.js @@ -0,0 +1,5 @@ +export { SearchMultiTextValueCombo } from "./multitextvalue.combo.search"; +export { SearchMultiSelectPopupView } from "./multitextvalue.popup.view.search"; +export { SearchMultiSelectTrigger } from "./multitextvalue.combo.trigger.search"; +export { SearchMultiSelectLoader } from "./multitextvalue.loader.search"; +export { SearchMultiSelectSearcher } from "./trigger/searcher.multitextvalue"; diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js index 4fdbf42ee..4b8b3dc91 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js @@ -1,29 +1,44 @@ -/** - * - * @class BI.SearchMultiTextValueCombo - * @extends BI.Single - */ -BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, { +import { shortcut, extend, isKey, Selection, remove, last, pushDistinct, deepClone, createWidget, toPix, isNotNull, initial, endWith, bind, nextTick, AbsoluteLayout, contains, map, makeObject, each, values, isNull, Func, isNotEmptyArray, isArray, find } from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiSelectTrigger, MultiSelectPopupView, MultiSelectCombo, SearchMultiSelectTrigger, SearchMultiSelectPopupView } from "@/widget"; +import { MultiSelectBar, TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.SearchMultiTextValueCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SearchMultiTextValueCombo extends Single { + static xtype = "bi.search_multi_text_value_combo"; + + static REQ_GET_DATA_LENGTH = 1; + static REQ_GET_ALL_DATA = -1; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-combo bi-search-multi-text-value-combo", height: 24, - items: [] + items: [], }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SearchMultiTextValueCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, self._startValue) : BI.pushDistinct(self.storeValue.value, self._startValue)); - self._updateAllValue(); - self._checkError(); - self.trigger.getSearcher().setState(self.storeValue); - self.trigger.getCounter().setButtonChecked(self.storeValue); + _init() { + const o = this.options; + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); + super._init(...arguments); + const assertShowValue = () => { + isKey(this._startValue) && + (this.storeValue.type === Selection.All + ? remove(this.storeValue.value, this._startValue) + : pushDistinct(this.storeValue.value, this._startValue)); + this._updateAllValue(); + this._checkError(); + this.trigger.getSearcher().setState(this.storeValue); + this.trigger.getCounter().setButtonChecked(this.storeValue); }; - this.storeValue = BI.deepClone(o.value || {}); + this.storeValue = deepClone(o.value || {}); this._updateAllValue(); this._assertValue(this.storeValue); @@ -32,10 +47,10 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, { // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ - type: "bi.search_multi_select_trigger", + this.trigger = createWidget({ + type: SearchMultiSelectTrigger.xtype, text: o.text, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), // adapter: this.popup, masker: { offset: { @@ -45,437 +60,450 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, { bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, }, }, - allValueGetter: function () { - return self.allValue; - }, + allValueGetter: () => this.allValue, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - self._itemsCreator(op, function (res) { - if (op.times === 1 && BI.isNotNull(op.keywords)) { + itemsCreator: (op, callback) => { + this._itemsCreator(op, res => { + if (op.times === 1 && isNotNull(op.keywords)) { // 预防trigger内部把当前的storeValue改掉 - self.trigger.setValue(BI.deepClone(self.getValue())); + this.trigger.setValue(deepClone(this.getValue())); } - callback.apply(self, arguments); + callback.apply(this, ...arguments); }); }, value: this.storeValue, - warningTitle: o.warningTitle + warningTitle: o.warningTitle, }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { - self._setStartValue(""); - this.getSearcher().setValue(self.storeValue); + this.trigger.on(MultiSelectTrigger.EVENT_START, () => { + this._setStartValue(""); + this.getSearcher().setValue(this.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { - self._setStartValue(""); + this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => { + this._setStartValue(""); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function (keywords) { - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { - self.combo.setValue(self.storeValue); - assertShowValue(); - self.combo.populate(); - self._setStartValue(""); - } else { - self.combo.setValue(self.storeValue); - assertShowValue(); - } - self._dataChange = true; - }); + this.trigger.on( + MultiSelectTrigger.EVENT_SEARCHING, + keywords => { + const lastKeyWord = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + this._joinKeywords(keywords, () => { + if (endWith(lastKeyWord, BI.BlankSplitChar)) { + this.combo.setValue(this.storeValue); + assertShowValue(); + this.combo.populate(); + this._setStartValue(""); + } else { + this.combo.setValue(this.storeValue); + assertShowValue(); + } + this._dataChange = true; + }); + } } - }); + ); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, (value, obj) => { + if (obj instanceof MultiSelectBar) { + this._joinAll(this.getValue(), () => { assertShowValue(); }); } else { - self._join(this.getValue(), function () { + this._join(this.getValue(), () => { assertShowValue(); }); } - self._dataChange = true; + this._dataChange = true; }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { - this.getCounter().setValue(self.storeValue); - }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.trigger.on( + MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, + () => { + this.getCounter().setValue(this.storeValue); + } + ); + this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => { + if (!this.combo.isViewVisible()) { + this.combo.showView(); } }); - this.combo = BI.createWidget({ - type: "bi.combo", + this.combo = createWidget({ + type: Combo.xtype, cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", toggle: false, container: o.container, el: this.trigger, adjustLength: 1, popup: { - type: "bi.search_multi_select_popup_view", - ref: function () { - self.popup = this; - self.trigger.setAdapter(this); + type: SearchMultiSelectPopupView.xtype, + ref: _ref => { + this.popup = _ref; + this.trigger.setAdapter(_ref); }, - listeners: [{ - eventName: BI.MultiSelectPopupView.EVENT_CHANGE, - action: function () { - self._dataChange = true; - self.storeValue = this.getValue(); - self._adjust(function () { - assertShowValue(); - }); + listeners: [ + { + eventName: MultiSelectPopupView.EVENT_CHANGE, + action :() => { + this._dataChange = true; + this.storeValue = this.getValue(); + this._adjust(() => { + assertShowValue(); + }); + }, + }, + { + eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM, + action :() => { + this._defaultState(); + }, + }, + { + eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR, + action: () => { + this._dataChange = true; + this.setValue(); + this._defaultState(); + }, } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, - action: function () { - self._defaultState(); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, - action: function () { - self._dataChange = true; - self.setValue(); - self._defaultState(); - } - }], - itemsCreator: BI.bind(self._itemsCreator, this), + ], + itemsCreator: bind(this._itemsCreator, this), valueFormatter: o.valueFormatter, - onLoaded: function () { - BI.nextTick(function () { - self.combo.adjustWidth(); - self.combo.adjustHeight(); - self.trigger.getCounter().adjustView(); - self.trigger.getSearcher().adjustView(); + onLoaded: () => { + nextTick(() => { + this.combo.adjustWidth(); + this.combo.adjustHeight(); + this.trigger.getCounter().adjustView(); + this.trigger.getSearcher().adjustView(); }); - } + }, }, value: o.value, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0; - } + hideChecker: e => triggerBtn.element.find(e.target).length === 0, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { if (!this.isViewVisible()) { - self._dataChange = false;// 标记数据是否发生变化 + 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 { /** * 在存在标红的情况，如果popover没有发生改变就确认需要同步trigger的值，否则对外value值和trigger样式不统一 */ assertShowValue(); - self._dataChange && self.fireEvent(BI.SearchMultiTextValueCombo.EVENT_CONFIRM); + this._dataChange && + this.fireEvent(SearchMultiTextValueCombo.EVENT_CONFIRM); } }); - var triggerBtn = BI.createWidget({ - type: "bi.trigger_icon_button", - width: o.height, - height: o.height, - cls: "multi-select-trigger-icon-button" - }); - triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { - self.trigger.getCounter().hideView(); - if (self.combo.isViewVisible()) { - self.combo.hideView(); + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { + this.trigger.getCounter().hideView(); + 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 - }, { - 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, + } + ], }); this._checkError(); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { - var o = this.options; + _assertValue(val) { + const o = this.options; val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); - BI.remove(val.value, function (idx, value) { - return !BI.contains(BI.map(o.items, "value"), value); - }); - }, + remove(val.value, (idx, value) => !contains(map(o.items, "value"), value)); + } - _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) { this._assertValue(this.storeValue); this.requesting = true; - this._itemsCreator({ - type: BI.SearchMultiTextValueCombo.REQ_GET_ALL_DATA, - keywords: keywords - }, function (ob) { - var values = BI.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])) { - self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); + const digest = items => { + const selectedMap = this._makeMap(items); + each(keywords, (i, val) => { + if (isNotNull(selectedMap[val])) { + this.storeValue.type === Selection.Multi + ? pushDistinct(this.storeValue.value, val) + : remove(this.storeValue.value, val); } }); - self._adjust(callback); - } - }, + this._adjust(callback); + }; + this._itemsCreator( + { + type: SearchMultiTextValueCombo.REQ_GET_ALL_DATA, + keywords, + }, + ob => { + const values = map(ob.items, "value"); + digest(values); + } + ); + } - _joinAll: function (res, callback) { - var self = this, o = this.options; + _joinAll(res, callback) { this._assertValue(res); this.requesting = true; - this._itemsCreator({ - type: BI.SearchMultiTextValueCombo.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKey()] - }, function (ob) { - var items = BI.map(ob.items, "value"); - if (self.storeValue.type === res.type) { - var change = false; - var map = self._makeMap(self.storeValue.value); - BI.each(items, function (i, v) { - if (BI.isNotNull(map[v])) { - change = true; - self.storeValue.assist && self.storeValue.assist.push(map[v]); - delete map[v]; + this._itemsCreator( + { + type: SearchMultiTextValueCombo.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKey()], + }, + ob => { + const map = this._makeMap(this.storeValue.value); + const items = map(ob.items, "value"); + if (this.storeValue.type === res.type) { + let change = false; + each(items, (i, v) => { + if (isNotNull(map[v])) { + change = true; + this.storeValue.assist && + this.storeValue.assist.push(map[v]); + delete map[v]; + } + }); + change && (this.storeValue.value = values(map)); + this._adjust(callback); + + return; + } + const selectedMap = this._makeMap(this.storeValue.value); + const notSelectedMap = this._makeMap(res.value); + const newItems = []; + each(items, (i, item) => { + if (isNotNull(selectedMap[items[i]])) { + this.storeValue.assist && + this.storeValue.assist.push(selectedMap[items[i]]); + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + remove(this.storeValue.assist, item); + newItems.push(item); } }); - change && (self.storeValue.value = BI.values(map)); - self._adjust(callback); - return; + this.storeValue.value = newItems.concat(values(selectedMap)); + this._adjust(callback); } - var selectedMap = self._makeMap(self.storeValue.value); - var notSelectedMap = self._makeMap(res.value); - var newItems = []; - BI.each(items, function (i, item) { - if (BI.isNotNull(selectedMap[items[i]])) { - self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - BI.remove(self.storeValue.assist, item); - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - self._adjust(callback); - }); - }, - - _adjust: function (callback) { - var self = this, o = this.options; - if (!this._count) { - this._itemsCreator({ - type: BI.SearchMultiTextValueCombo.REQ_GET_DATA_LENGTH - }, function (res) { - self._count = res.count; - adjust(); - callback(); - }); - } else { - adjust(); - callback(); - - } + ); + } - function adjust () { - if (self.storeValue.type === BI.Selection.All && self.storeValue.value.length >= self._count) { - self.storeValue = { - type: BI.Selection.Multi, - value: [] + _adjust(callback) { + const adjust = () => { + if ( + this.storeValue.type === Selection.All && + this.storeValue.value.length >= this._count + ) { + this.storeValue = { + type: Selection.Multi, + value: [], }; - } else if (self.storeValue.type === BI.Selection.Multi && self.storeValue.value.length >= self._count) { - self.storeValue = { - type: BI.Selection.All, - value: [] + } else if ( + this.storeValue.type === Selection.Multi && + this.storeValue.value.length >= this._count + ) { + this.storeValue = { + type: Selection.All, + value: [], }; } - self._updateAllValue(); - self._checkError(); - if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.SearchMultiTextValueCombo.EVENT_CONFIRM); - self.wants2Quit = false; + this._updateAllValue(); + this._checkError(); + if (this.wants2Quit === true) { + this._dataChange && + this.fireEvent(SearchMultiTextValueCombo.EVENT_CONFIRM); + this.wants2Quit = false; } - self.requesting = false; + this.requesting = false; + }; + if (!this._count) { + this._itemsCreator( + { + type: SearchMultiTextValueCombo.REQ_GET_DATA_LENGTH, + }, + res => { + this._count = res.count; + adjust(); + callback(); + } + ); + } else { + adjust(); + callback(); } - }, + } - _join: function (res, callback) { - var self = this, o = this.options; + _join(res, callback) { this._assertValue(res); this._assertValue(this.storeValue); if (this.storeValue.type === res.type) { - var map = this._makeMap(this.storeValue.value); - BI.each(res.value, function (i, v) { + const map = this._makeMap(this.storeValue.value); + each(res.value, (i, v) => { if (!map[v]) { - self.storeValue.value.push(v); - BI.remove(self.storeValue.assist, v); + this.storeValue.value.push(v); + remove(this.storeValue.assist, v); map[v] = v; } }); - var change = false; - BI.each(res.assist, function (i, v) { - if (BI.isNotNull(map[v])) { + let change = false; + each(res.assist, (i, v) => { + if (isNotNull(map[v])) { change = true; - self.storeValue.assist && self.storeValue.assist.push(map[v]); + this.storeValue.assist && + this.storeValue.assist.push(map[v]); delete map[v]; } }); - change && (this.storeValue.value = BI.values(map)); - self._adjust(callback); + change && (this.storeValue.value = values(map)); + this._adjust(callback); + return; } this._joinAll(res, callback); - }, + } - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.popup.setStartValue(value); - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * 100; items[i] && i < times * 100; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * 100; items[i] && i < times * 100; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * 100 < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this, o = this.options; - var items = o.items; - var keywords = (options.keywords || []).slice(); + _itemsCreator(options, callback) { + const o = this.options; + let items = o.items; + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); items = search.match.concat(search.find); }); - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - items = BI.filter(items, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const filter = makeObject(options.selectedValues, true); + items = filter(items, (i, ob) => !filter[ob.value]); } - if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { + if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: items + items, }); + return; } - if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { - callback({count: items.length}); + if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) { + callback({ count: items.length }); + return; } callback({ - items: self._getItemsByTimes(items, options.times), - hasNext: self._hasNextByTimes(items, options.times) + items: this._getItemsByTimes(items, options.times), + hasNext: this._hasNextByTimes(items, options.times), }); - }, + } - _checkError: function () { - var v = this.storeValue.value || []; - if(BI.isNotEmptyArray(v)) { - v = BI.isArray(v) ? v : [v]; - var result = BI.find(this.allValue, function (idx, value) { - return !BI.contains(v, value); - }); - if (BI.isNull(result)) { - BI.isNotNull(this.trigger) && (this.trigger.setTipType("success")); + _checkError() { + let v = this.storeValue.value || []; + if (isNotEmptyArray(v)) { + v = isArray(v) ? v : [v]; + const result = find(this.allValue, (idx, value) => !contains(v, value)); + if (isNull(result)) { + isNotNull(this.trigger) && this.trigger.setTipType("success"); this.element.removeClass("combo-error"); } else { - BI.isNotNull(this.trigger) && (this.trigger.setTipType("warning")); + isNotNull(this.trigger) && this.trigger.setTipType("warning"); this.element.addClass("combo-error"); } } else { - if(v.length === this.allValue.length){ - BI.isNotNull(this.trigger) && (this.trigger.setTipType("success")); + if (v.length === this.allValue.length) { + isNotNull(this.trigger) && this.trigger.setTipType("success"); this.element.removeClass("combo-error"); - }else { - BI.isNotNull(this.trigger) && (this.trigger.setTipType("warning")); + } else { + isNotNull(this.trigger) && this.trigger.setTipType("warning"); this.element.addClass("combo-error"); } } - }, + } - _updateAllValue: function () { + _updateAllValue() { this.storeValue = this.storeValue || {}; - this.allValue = BI.deepClone(this.storeValue.value || []); - }, + this.allValue = deepClone(this.storeValue.value || []); + } - setValue: function (v) { - this.storeValue = BI.deepClone(v || {}); + setValue(v) { + this.storeValue = deepClone(v || {}); this._updateAllValue(); this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); this._checkError(); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue); - }, + getValue() { + return deepClone(this.storeValue); + } - _populate: function () { + _populate() { this._count = null; this.combo.populate(); - }, + } - populate: function (items) { + populate(items) { this.options.items = items; this._populate(); } -}); - -BI.extend(BI.SearchMultiTextValueCombo, { +} +extend(SearchMultiTextValueCombo, { REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 + REQ_GET_ALL_DATA: -1, }); - -BI.SearchMultiTextValueCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - -BI.shortcut("bi.search_multi_text_value_combo", BI.SearchMultiTextValueCombo); diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js index 3256994ae..ba9dae06a 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js @@ -1,31 +1,44 @@ -BI.SearchMultiSelectTrigger = BI.inherit(BI.Trigger, { +import { shortcut, extend, emptyFn, createWidget, Events, nextTick, HTapeLayout, RightVerticalAdaptLayout } from "@/core"; +import { Trigger } from "@/base"; +import { MultiSelectCheckSelectedSwitcher, MultiSelectSearcher, SearchMultiSelectSearcher } from "@/widget"; - constants: { - height: 14, - rgap: 4, - lgap: 4 - }, +@shortcut() +export class SearchMultiSelectTrigger extends Trigger { + static xtype = "bi.search_multi_select_trigger"; - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectTrigger.superclass._defaultConfig.apply(this, arguments), { + 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"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-multi-select-trigger", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcher: {}, switcher: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.SearchMultiSelectTrigger.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.search_multi_select_searcher", + this.searcher = createWidget(o.searcher, { + type: SearchMultiSelectSearcher.xtype, height: o.height, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, @@ -36,119 +49,125 @@ BI.SearchMultiSelectTrigger = BI.inherit(BI.Trigger, { value: o.value, text: o.text, tipType: o.tipType, - warningTitle: o.warningTitle + warningTitle: o.warningTitle, }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_START, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_START); + this.searcher.on(MultiSelectSearcher.EVENT_START, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_START); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_PAUSE, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_PAUSE); + this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_PAUSE); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_SEARCHING, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_SEARCHING, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_SEARCHING, ...arguments); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_STOP, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_STOP); + this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_STOP); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_CHANGE, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_CHANGE, ...arguments); }); - this.numberCounter = BI.createWidget(o.switcher, { - type: "bi.multi_select_check_selected_switcher", + this.numberCounter = createWidget(o.switcher, { + type: MultiSelectCheckSelectedSwitcher.xtype, valueFormatter: o.valueFormatter, itemsCreator: o.itemsCreator, adapter: o.adapter, masker: o.masker, - value: o.value - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_COUNTER_CLICK); - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW); + value: o.value, }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_COUNTER_CLICK); + } + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + this.fireEvent( + SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW + ); + } + ); - var wrapNumberCounter = BI.createWidget({ - type: "bi.right_vertical_adapt", + const wrapNumberCounter = createWidget({ + type: RightVerticalAdaptLayout.xtype, hgap: 4, - items: [{ - el: this.numberCounter - }] + items: [ + { + el: this.numberCounter, + } + ], }); - var wrapper = BI.createWidget({ - type: "bi.htape", + const wrapper = createWidget({ + type: HTapeLayout.xtype, element: this, items: [ { el: this.searcher, - width: "fill" - }, { + width: "fill", + }, + { el: wrapNumberCounter, - width: 0 - }, { - el: BI.createWidget(), - width: 24 - }] + width: 0, + }, + { + el: createWidget(), + width: 24, + } + ], }); - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - wrapper.attr("items")[1].width = (b === true ? self.numberCounter.element.outerWidth() + 8 : 0); + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + wrapper.attr("items")[1].width = + b === true + ? this.numberCounter.element.outerWidth() + 8 + : 0; wrapper.resize(); }); }); - this.element.click(function (e) { - if (self.element.find(e.target).length > 0) { - self.numberCounter.hideView(); + this.element.click(e => { + if (this.element.find(e.target).length > 0) { + this.numberCounter.hideView(); } }); - }, + } - getCounter: function () { + getCounter() { return this.numberCounter; - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); this.numberCounter.hideView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); this.numberCounter.setAdapter(adapter); - }, + } - setValue: function (ob) { + setValue(ob) { this.searcher.setValue(ob); this.numberCounter.setValue(ob); - }, + } - setTipType: function (v) { + setTipType(v) { this.searcher.setTipType(v); - }, + } - getKey: function () { + getKey() { return this.searcher.getKey(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); } -}); - -BI.SearchMultiSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.SearchMultiSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; -BI.SearchMultiSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SearchMultiSelectTrigger.EVENT_START = "EVENT_START"; -BI.SearchMultiSelectTrigger.EVENT_STOP = "EVENT_STOP"; -BI.SearchMultiSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SearchMultiSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; - -BI.shortcut("bi.search_multi_select_trigger", BI.SearchMultiSelectTrigger); +} diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js index 59113111e..d03a6865f 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js @@ -1,184 +1,202 @@ -/** - * 多选加载数据面板 - * Created by guy on 15/11/2. - * @class BI.SearchMultiSelectLoader - * @extends Widget - */ -BI.SearchMultiSelectLoader = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectLoader.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isKey, Selection, map, contains, remove, pushDistinct, Controller, VerticalLayout, createItems, delay, isNotNull } from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case"; + +@shortcut() +export class SearchMultiSelectLoader extends Widget { + static xtype = "bi.search_multi_select_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-loader", logic: { - dynamic: true + dynamic: true, }, el: { - height: 400 + height: 400, }, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, + valueFormatter: emptyFn, + itemsCreator: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - onLoaded: BI.emptyFn + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SearchMultiSelectLoader.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; - var hasNext = false; + const opts = this.options; + let hasNext = false; this.storeValue = opts.value || {}; this._assertValue(this.storeValue); - this.button_group = BI.createWidget({ - type: "bi.select_list", + this.button_group = createWidget({ + type: SelectList.xtype, element: this, logic: opts.logic, toolbar: { - type: "bi.multi_select_bar", + type: MultiSelectBar.xtype, cls: "bi-list-item-active", height: this.options.itemHeight, - iconWrapperWidth: 36 + iconWrapperWidth: 36, }, - 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_MULTI, - 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; - self.storeValue && (op = BI.extend(op || {}, { - selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi - ? self.storeValue.value.concat(startValue) : self.storeValue.value - })); - opts.itemsCreator(op, function (ob) { + el: { + chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, + behaviors: { + redmark: () => true, + }, + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + }, + }, + opts.el + ), + itemsCreator: (op, callback) => { + const startValue = this._startValue; + this.storeValue && + (op = extend(op || {}, { + selectedValues: + isKey(startValue) && + this.storeValue.type === Selection.Multi + ? this.storeValue.value.concat(startValue) + : this.storeValue.value, + })); + opts.itemsCreator(op, ob => { hasNext = ob.hasNext; - var firstItems = []; - if (op.times === 1 && self.storeValue) { - var json = BI.map(self.storeValue.value, function (i, v) { - var txt = opts.valueFormatter(v) || v; + let firstItems = []; + if (op.times === 1 && this.storeValue) { + const json = map(this.storeValue.value, (i, v) => { + const txt = opts.valueFormatter(v) || v; + return { text: txt, value: v, title: txt, - selected: self.storeValue.type === BI.Selection.Multi + selected: + this.storeValue.type === Selection.Multi, }; }); - if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) { - var txt = opts.valueFormatter(startValue) || startValue; + if ( + isKey(this._startValue) && + !contains(this.storeValue.value, this._startValue) + ) { + const txt = + opts.valueFormatter(startValue) || startValue; json.unshift({ text: txt, value: startValue, title: txt, - selected: true + selected: true, }); } - firstItems = self._createItems(json); + firstItems = this._createItems(json); } - callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || ""); - if (op.times === 1 && self.storeValue) { - BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue)); - self.setValue(self.storeValue); + callback( + firstItems.concat(this._createItems(ob.items)), + ob.keyword || "" + ); + if (op.times === 1 && this.storeValue) { + isKey(startValue) && + (this.storeValue.type === Selection.All + ? remove(this.storeValue.value, startValue) + : pushDistinct( + this.storeValue.value, + startValue + )); + this.setValue(this.storeValue); } - (op.times === 1) && self._scrollToTop(); + op.times === 1 && this._scrollToTop(); }); }, - hasNext: function () { - return hasNext; - }, - value: this.storeValue + hasNext: () => hasNext, + value: this.storeValue, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, () => { + this.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectLoader.EVENT_CHANGE, arguments); + this.button_group.on(SelectList.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectLoader.EVENT_CHANGE, ...arguments); }); - }, + } - _createItems: function (items) { - return BI.createItems(items, { - type: "bi.multi_select_item", + _createItems(items) { + return createItems(items, { + type: MultiSelectItem.xtype, logic: this.options.logic, cls: "bi-list-item-active", height: this.options.itemHeight, selected: this.isAllSelected(), - iconWrapperWidth: 36 + iconWrapperWidth: 36, }); - }, + } - _scrollToTop: function () { - var self = this; - BI.delay(function () { - self.button_group.element.scrollTop(0); + _scrollToTop() { + delay(() => { + this.button_group.element.scrollTop(0); }, 30); - }, + } - isAllSelected: function () { + isAllSelected() { return this.button_group.isAllSelected(); - }, + } - _assertValue: function (val) { + _assertValue(val) { val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); - }, + } - 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) { - if (BI.isNotNull(items)) { + populate(items) { + if (isNotNull(items)) { arguments[0] = this._createItems(items); } - this.button_group.populate.apply(this.button_group, arguments); - }, + 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.SearchMultiSelectLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.search_multi_select_loader", BI.SearchMultiSelectLoader); \ No newline at end of file +} diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js index cb8027f0c..d2db9c7dd 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js @@ -1,92 +1,104 @@ -BI.SearchMultiSelectPopupView = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText } from "@/core"; +import { MultiPopupView } from "@/case"; +import { SearchMultiSelectLoader } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SearchMultiSelectPopupView extends Widget { + static xtype = "bi.search_multi_select_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-popup-view", maxWidth: "auto", minWidth: 135, maxHeight: 400, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - onLoaded: BI.emptyFn + valueFormatter: emptyFn, + itemsCreator: emptyFn, + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SearchMultiSelectPopupView.superclass._init.apply(this, arguments); - var self = this, opts = this.options; + _init() { + super._init(...arguments); + const opts = this.options; - this.loader = BI.createWidget({ - type: "bi.search_multi_select_loader", + this.loader = createWidget({ + type: SearchMultiSelectLoader.xtype, itemsCreator: opts.itemsCreator, valueFormatter: opts.valueFormatter, onLoaded: opts.onLoaded, - value: opts.value + value: opts.value, }); - this.popupView = BI.createWidget({ - type: "bi.multi_popup_view", + this.popupView = createWidget({ + type: MultiPopupView.xtype, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, element: this, - buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], + buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")], el: this.loader, - value: opts.value + value: opts.value, }); - this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CHANGE); + this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectPopupView.EVENT_CHANGE); }); - this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { - switch (index) { + this.popupView.on( + MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, + index => { + switch (index) { case 0: - self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CLICK_CLEAR); + this.fireEvent( + SearchMultiSelectPopupView.EVENT_CLICK_CLEAR + ); break; case 1: - self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM); + this.fireEvent( + SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM + ); break; + default: + break; + } } - }); - }, + ); + } - isAllSelected: function () { + isAllSelected() { return this.loader.isAllSelected(); - }, + } - 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.SearchMultiSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.SearchMultiSelectPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; - - -BI.shortcut("bi.search_multi_select_popup_view", BI.SearchMultiSelectPopupView); + } +} diff --git a/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js b/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js index 506532b3c..a59d7582d 100644 --- a/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js +++ b/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js @@ -1,175 +1,179 @@ -BI.SearchMultiSelectSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isNotNull, Selection, size, each } from "@/core"; +import { Searcher } from "@/base"; +import { MultiSelectEditor, MultiSelectSearchPane } from "@/widget"; + +@shortcut() +export class SearchMultiSelectSearcher extends Widget { + static xtype = "bi.search_multi_select_searcher"; + + 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-multi-select-searcher", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, el: {}, popup: {}, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.SearchMultiSelectSearcher.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.editor = BI.createWidget(o.el, { - type: "bi.multi_select_editor", + _init() { + super._init(...arguments); + const o = this.options; + this.editor = createWidget(o.el, { + type: MultiSelectEditor.xtype, height: o.height, text: o.text, tipType: o.tipType, - warningTitle: o.warningTitle + warningTitle: o.warningTitle, }); - 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({ - type: "bi.multi_select_search_pane", - valueFormatter: o.valueFormatter, - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - var keyword = self.editor.getValue(); - op.keywords = [keyword]; - o.itemsCreator(op, callback); + popup: extend( + { + type: MultiSelectSearchPane.xtype, + valueFormatter: o.valueFormatter, + keywordGetter: () => this.editor.getValue(), + itemsCreator: (op, callback) => { + const keyword = this.editor.getValue(); + op.keywords = [keyword]; + o.itemsCreator(op, callback); + }, + value: o.value, }, - value: o.value - }, o.popup), + o.popup + ), adapter: o.adapter, - masker: o.masker + masker: o.masker, }); - this.searcher.on(BI.Searcher.EVENT_START, function () { - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_CHANGE, ...arguments); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, () => { + const keywords = this.getKeywords(); + this.fireEvent(SearchMultiSelectSearcher.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.getValue(); - }, + } - 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 (obj) { - var o = this.options; - var ob = {}; + setState(obj) { + let state; + const o = this.options; + const ob = {}; ob.type = obj.type; ob.value = o.allValueGetter() || []; ob.assist = obj.assist; - if (ob.type === BI.Selection.All) { + if (ob.type === Selection.All) { if (ob.value.length === 0) { - this.editor.setState(BI.Selection.All); - } else if (BI.size(ob.assist) <= 20) { - var state = ""; - BI.each(ob.assist, function (i, v) { + this.editor.setState(Selection.All); + } else if (size(ob.assist) <= 20) { + state = ""; + each(ob.assist, (i, v) => { if (i === 0) { - state += "" + (o.valueFormatter(v + "") || v); + state += `${o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (o.valueFormatter(v + "") || v); + state += `,${o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); } else { - this.editor.setState(BI.Selection.Multi); + this.editor.setState(Selection.Multi); } } else { if (ob.value.length === 0) { - this.editor.setState(BI.Selection.None); - } else if (BI.size(ob.value) <= 20) { - var state = ""; - BI.each(ob.value, function (i, v) { + this.editor.setState(Selection.None); + } else if (size(ob.value) <= 20) { + state = ""; + each(ob.value, (i, v) => { if (i === 0) { - state += "" + (o.valueFormatter(v + "") || v); + state += `${o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (o.valueFormatter(v + "") || v); + state += `,${o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); } else { - this.editor.setState(BI.Selection.Multi); + this.editor.setState(Selection.Multi); } } - }, + } - setTipType: function (v) { + setTipType(v) { this.editor.setTipType(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.SearchMultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.SearchMultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SearchMultiSelectSearcher.EVENT_START = "EVENT_START"; -BI.SearchMultiSelectSearcher.EVENT_STOP = "EVENT_STOP"; -BI.SearchMultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SearchMultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.shortcut("bi.search_multi_select_searcher", BI.SearchMultiSelectSearcher); +} From 9335c4ef9387defb6a8badd793272365936b749a Mon Sep 17 00:00:00 2001 From: zsmj Date: Fri, 13 Jan 2023 15:38:14 +0800 Subject: [PATCH 2/6] update --- src/widget/multilayersingletree/index.js | 2 - .../selecttree/nodes/node.first.plus.js | 109 ------------------ src/widget/selecttree/nodes/node.last.plus.js | 109 ------------------ src/widget/selecttree/nodes/node.mid.plus.js | 109 ------------------ src/widget/selecttree/nodes/node.plus.js | 109 ------------------ 5 files changed, 438 deletions(-) delete mode 100644 src/widget/selecttree/nodes/node.first.plus.js delete mode 100644 src/widget/selecttree/nodes/node.last.plus.js delete mode 100644 src/widget/selecttree/nodes/node.mid.plus.js delete mode 100644 src/widget/selecttree/nodes/node.plus.js diff --git a/src/widget/multilayersingletree/index.js b/src/widget/multilayersingletree/index.js index 4098e74cc..d0f9e5497 100644 --- a/src/widget/multilayersingletree/index.js +++ b/src/widget/multilayersingletree/index.js @@ -3,5 +3,3 @@ export { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.ins 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/selecttree/nodes/node.first.plus.js b/src/widget/selecttree/nodes/node.first.plus.js deleted file mode 100644 index 484128e4d..000000000 --- a/src/widget/selecttree/nodes/node.first.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, LogicFactory, Direction -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { FirstTreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreeFirstPlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_first_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-first-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: FirstTreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - Direction.Left, - { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} diff --git a/src/widget/selecttree/nodes/node.last.plus.js b/src/widget/selecttree/nodes/node.last.plus.js deleted file mode 100644 index 572d66e55..000000000 --- a/src/widget/selecttree/nodes/node.last.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, LogicFactory, Direction -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { LastTreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreeLastPlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_last_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-last-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: LastTreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - Direction.Left, - { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} diff --git a/src/widget/selecttree/nodes/node.mid.plus.js b/src/widget/selecttree/nodes/node.mid.plus.js deleted file mode 100644 index 670533dd5..000000000 --- a/src/widget/selecttree/nodes/node.mid.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, Direction, LogicFactory -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { MidTreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreeMidPlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_mid_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-mid-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: MidTreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - Direction.Left, - { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} diff --git a/src/widget/selecttree/nodes/node.plus.js b/src/widget/selecttree/nodes/node.plus.js deleted file mode 100644 index e3e41de7f..000000000 --- a/src/widget/selecttree/nodes/node.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, LogicFactory -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { TreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreePlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: TreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.iconWrapperWidth || o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - BI.Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - BI.Direction.Left, - { - width: 24, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} From 6b225705fc7e0329aed15f74a349eec301de7f36 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Fri, 13 Jan 2023 15:40:20 +0800 Subject: [PATCH 3/6] =?UTF-8?q?KERNEL-14116=20refactor:=20component/allval?= =?UTF-8?q?uechooser=E3=80=81allvaluemultitextvaluecombo=E3=80=81form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../abstract.allvaluechooser.js | 125 +++++++------- .../allvaluechooser/combo.allvaluechooser.js | 92 +++++------ src/component/allvaluechooser/index.js | 3 + .../allvaluechooser/pane.allvaluechooser.js | 78 +++++---- .../allvalue.multitextvalue.combo.js | 82 ++++----- src/component/form/form.field.js | 155 ++++++++++-------- src/component/form/form.js | 105 ++++++------ src/component/form/index.js | 2 + src/component/index.js | 15 ++ 9 files changed, 350 insertions(+), 307 deletions(-) create mode 100644 src/component/allvaluechooser/index.js create mode 100644 src/component/form/index.js create mode 100644 src/component/index.js diff --git a/src/component/allvaluechooser/abstract.allvaluechooser.js b/src/component/allvaluechooser/abstract.allvaluechooser.js index c13d8a30f..1673d2866 100644 --- a/src/component/allvaluechooser/abstract.allvaluechooser.js +++ b/src/component/allvaluechooser/abstract.allvaluechooser.js @@ -1,61 +1,74 @@ -/** - * 简单的复选下拉框控件, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.AbstractAllValueChooser - * @extends BI.Widget - */ -BI.AbstractAllValueChooser = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + isNotNull, + some, + isNotEmptyArray, + each, + Func, + uniq, + makeObject, + filter, + difference, + map, + Selection +} from "@/core"; +import { MultiSelectCombo } from "@/widget"; - _const: { - perPage: 100 - }, +@shortcut() +export class AbstractAllValueChooser extends Widget { + _const = { perPage: 100 }; - _defaultConfig: function () { - return BI.extend(BI.AbstractAllValueChooser.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { width: 200, height: 30, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _valueFormatter: function (v) { - var text = v; + _valueFormatter(v) { + let text = v; if (this.options.valueFormatter) { return this.options.valueFormatter(v); } - if (BI.isNotNull(this.items)) { - BI.some(this.items, function (i, item) { + if (isNotNull(this.items)) { + some(this.items, (i, item) => { // 把value都换成字符串 // 需要考虑到value也可能是数字 - if (item.value === v || item.value + "" === v) { + if (item.value === v || `${item.value}` === v) { text = item.text; + return true; } }); } + return text; - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * this._const.perPage < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this, o = this.options; + _itemsCreator(options, callback) { + const self = this, + o = this.options; if (!o.cache || !this.items) { - o.itemsCreator({}, function (items) { + o.itemsCreator({}, items => { self.items = items; call(items); }); @@ -64,54 +77,56 @@ BI.AbstractAllValueChooser = BI.inherit(BI.Widget, { } function call(items) { - var keywords = (options.keywords || []).slice(); + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - var resultItems = items; - if (BI.isNotEmptyArray(keywords)) { + let resultItems = items; + if (isNotEmptyArray(keywords)) { resultItems = []; - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); resultItems = resultItems.concat(search.match).concat(search.find); }); - resultItems = BI.uniq(resultItems); + resultItems = uniq(resultItems); } - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - resultItems = BI.filter(resultItems, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const values = makeObject(options.selectedValues, true); + resultItems = filter(resultItems, (i, ob) => !values[ob.value]); } - if (options.type === BI.MultiSelectCombo.REQ_GET_ALL_DATA) { + if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: resultItems + items: resultItems, }); + return; } - if (options.type === BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { + if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) { callback({ count: resultItems.length }); + return; } callback({ items: self._getItemsByTimes(resultItems, options.times), - hasNext: self._hasNextByTimes(resultItems, options.times) + hasNext: self._hasNextByTimes(resultItems, options.times), }); } - }, + } - _assertValue: function (v) { + _assertValue(v) { v = v || {}; - var value = v; - if (BI.isNotNull(this.items)) { - var isAllSelect = BI.difference(BI.map(this.items, "value"), v.value).length === 0; + let value = v; + if (isNotNull(this.items)) { + const isAllSelect = difference(map(this.items, "value"), v.value).length === 0; if (isAllSelect) { value = { - type: BI.Selection.All, + type: Selection.All, value: [], }; } } + return value; - }, -}); + } +} diff --git a/src/component/allvaluechooser/combo.allvaluechooser.js b/src/component/allvaluechooser/combo.allvaluechooser.js index 11494b584..ed746ec3c 100644 --- a/src/component/allvaluechooser/combo.allvaluechooser.js +++ b/src/component/allvaluechooser/combo.allvaluechooser.js @@ -1,77 +1,77 @@ -/** - * 简单的复选下拉框控件, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.AllValueChooserCombo - * @extends BI.AbstractAllValueChooser - */ -BI.AllValueChooserCombo = BI.inherit(BI.AbstractAllValueChooser, { +import { shortcut, extend, emptyFn, isNotNull, createWidget, bind, Selection, difference, map } from "@/core"; +import { AbstractAllValueChooser } from "./abstract.allvaluechooser"; +import { MultiSelectCombo } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.AllValueChooserCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class AllValueChooserCombo extends AbstractAllValueChooser { + static xtype = "bi.all_value_chooser_combo"; + + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-all-value-chooser-combo", width: 200, height: 24, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _init: function () { - BI.AllValueChooserCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - if (BI.isNotNull(o.items)) { + _init() { + super._init(...arguments); + const o = this.options; + if (isNotNull(o.items)) { this.items = o.items; } - this.combo = BI.createWidget({ - type: "bi.multi_select_combo", + this.combo = createWidget({ + type: MultiSelectCombo.xtype, simple: o.simple, text: o.text, element: this, - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this), + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), width: o.width, height: o.height, value: this._assertValue({ - type: BI.Selection.Multi, - value: o.value || [] - }) + type: Selection.Multi, + value: o.value || [], + }), }); - this.combo.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () { - self.fireEvent(BI.AllValueChooserCombo.EVENT_CONFIRM); + this.combo.on(MultiSelectCombo.EVENT_CONFIRM, () => { + this.fireEvent(AllValueChooserCombo.EVENT_CONFIRM); }); - }, + } - setValue: function (v) { - this.combo.setValue(this._assertValue({ - type: BI.Selection.Multi, - value: v || [] - })); - }, + setValue(v) { + this.combo.setValue( + this._assertValue({ + type: Selection.Multi, + value: v || [], + }) + ); + } - getValue: function () { + getValue() { return this.getAllValue(); - }, + } - getAllValue: function () { - var val = this.combo.getValue() || {}; - if (val.type === BI.Selection.Multi) { + getAllValue() { + const val = this.combo.getValue() || {}; + if (val.type === Selection.Multi) { return val.value || []; } - return BI.difference(BI.map(this.items, "value"), val.value || []); - }, + return difference(map(this.items, "value"), val.value || []); + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.combo.populate(); } -}); -BI.AllValueChooserCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.all_value_chooser_combo", BI.AllValueChooserCombo); +} diff --git a/src/component/allvaluechooser/index.js b/src/component/allvaluechooser/index.js new file mode 100644 index 000000000..d69b5f254 --- /dev/null +++ b/src/component/allvaluechooser/index.js @@ -0,0 +1,3 @@ +export { AbstractAllValueChooser } from "./abstract.allvaluechooser"; +export { AllValueChooserCombo } from "./combo.allvaluechooser"; +export { AllValueChooserPane } from "./pane.allvaluechooser"; diff --git a/src/component/allvaluechooser/pane.allvaluechooser.js b/src/component/allvaluechooser/pane.allvaluechooser.js index 6188f14ee..6ea534af7 100644 --- a/src/component/allvaluechooser/pane.allvaluechooser.js +++ b/src/component/allvaluechooser/pane.allvaluechooser.js @@ -1,69 +1,67 @@ -/** - * 简单的复选面板, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.AllValueChooserPane - * @extends BI.AbstractAllValueChooser - */ -BI.AllValueChooserPane = BI.inherit(BI.AbstractAllValueChooser, { +import { shortcut, extend, emptyFn, createWidget, bind, isNotNull, Selection, difference, map } from "@/core"; +import { AbstractAllValueChooser } from "./abstract.allvaluechooser"; +import { MultiSelectList } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.AllValueChooserPane.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class AllValueChooserPane extends AbstractAllValueChooser { + static xtype = "bi.all_value_chooser_pane"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-all-value-chooser-pane", width: 200, height: 30, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _init: function () { - BI.AllValueChooserPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.list = BI.createWidget({ - type: "bi.multi_select_list", + _init() { + super._init(...arguments); + const o = this.options; + this.list = createWidget({ + type: MultiSelectList.xtype, element: this, - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this), + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), width: o.width, - height: o.height + height: o.height, }); - this.list.on(BI.MultiSelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.AllValueChooserPane.EVENT_CHANGE); + this.list.on(MultiSelectList.EVENT_CHANGE, () => { + this.fireEvent(AllValueChooserPane.EVENT_CHANGE); }); - if (BI.isNotNull(o.items)) { + if (isNotNull(o.items)) { this.items = o.items; this.list.populate(); } - }, + } - setValue: function (v) { + setValue(v) { this.list.setValue({ - type: BI.Selection.Multi, - value: v || [] + type: Selection.Multi, + value: v || [], }); - }, + } - getValue: function () { - var val = this.list.getValue() || {}; - if (val.type === BI.Selection.Multi) { + getValue() { + const val = this.list.getValue() || {}; + if (val.type === Selection.Multi) { return val.value || []; } - return BI.difference(BI.map(this.items, "value"), val.value || []); - }, + return difference(map(this.items, "value"), val.value || []); + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.list.populate(); } -}); -BI.AllValueChooserPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.all_value_chooser_pane", BI.AllValueChooserPane); +} diff --git a/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js b/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js index 2ac30295b..44e94b4b2 100644 --- a/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js +++ b/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js @@ -1,66 +1,72 @@ -BI.AllValueMultiTextValueCombo = BI.inherit(BI.Widget, { +import { shortcut, Widget, Selection, each, contains } from "@/core"; +import { SearchMultiTextValueCombo } from "@/widget"; - props: { - baseCls: "bi-all-value-multi-text-value-combo", - width: 200, - height: 24, - items: [] - }, +@shortcut() +export class AllValueMultiTextValueCombo extends Widget { + static xtype = "bi.all_value_multi_text_value_combo"; - render: function () { - var self = this, o = this.options; - var value = this._digestValue(o.value); + props = { baseCls: "bi-all-value-multi-text-value-combo", width: 200, height: 24, items: [] }; + + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + render() { + const self = this, + o = this.options; + const value = this._digestValue(o.value); + return { type: "bi.search_multi_text_value_combo", simple: o.simple, text: o.text, height: o.height, items: o.items, - value: value, + value, numOfPage: 100, valueFormatter: o.valueFormatter, warningTitle: o.warningTitle, - listeners: [{ - eventName: BI.SearchMultiTextValueCombo.EVENT_CONFIRM, - action: function () { - self.fireEvent(BI.AllValueMultiTextValueCombo.EVENT_CONFIRM); + listeners: [ + { + eventName: SearchMultiTextValueCombo.EVENT_CONFIRM, + action () { + self.fireEvent(AllValueMultiTextValueCombo.EVENT_CONFIRM); + }, } - }], - ref: function () { + ], + ref () { self.combo = this; - } + }, }; - }, + } - setValue: function (v) { - var value = this._digestValue(v); + setValue(v) { + const value = this._digestValue(v); this.combo.setValue(value); - }, + } - getValue: function () { - var obj = this.combo.getValue() || {}; + getValue() { + const obj = this.combo.getValue() || {}; obj.value = obj.value || []; - if(obj.type === BI.Selection.All) { - var values = []; - BI.each(this.options.items, function (idx, item) { - !BI.contains(obj.value, item.value) && values.push(item.value); + if (obj.type === Selection.All) { + const values = []; + each(this.options.items, (idx, item) => { + !contains(obj.value, item.value) && values.push(item.value); }); + return values; } + return obj.value || []; - }, + } - populate: function (items) { + populate(items) { this.options.items = items; - this.combo.populate.apply(this.combo, arguments); - }, + this.combo.populate(...arguments); + } - _digestValue: function (v) { + _digestValue(v) { return { - type: BI.Selection.Multi, - value: v || [] + type: Selection.Multi, + value: v || [], }; } -}); -BI.AllValueMultiTextValueCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.all_value_multi_text_value_combo", BI.AllValueMultiTextValueCombo); +} diff --git a/src/component/form/form.field.js b/src/component/form/form.field.js index 0b67041b8..4bd064913 100644 --- a/src/component/form/form.field.js +++ b/src/component/form/form.field.js @@ -1,98 +1,111 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2022/1/11 - */ - BI.FormField = BI.inherit(BI.Widget, { - props: { +import { shortcut, Widget, extend, concat, isKey, VerticalAlign } from "@/core"; + +@shortcut() +export class FormField extends Widget { + static xtype = "bi.form_field"; + + props = { baseCls: "bi-form-field", label: "", el: {}, headerCls: "", labelAlign: "right", // 文字默认右对齐 - validate: function () { + validate () { return true; - } // 默认返回true - }, + }, // 默认返回true + } - render: function () { - var self = this, o = this.options; + render () { + const self = this, + o = this.options; - var field = { + const field = { type: "bi.absolute", - items: [{ - el: BI.extend({}, o.el, { - ref: function (_ref) { - self.field = _ref; - o.el.ref && o.el.ref.call(this, _ref); - }, - height: o.el.height || 28, - listeners: BI.concat(o.el.listeners, [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } - }, { - eventName: "EVENT_CONFIRM", - action: function () { - self.fireEvent("EVENT_CONFIRM"); - } - }]) - }), - left: 0, - bottom: 0, - right: 0, - top: 0 - }, { - el: { - type: "bi.label", - cls: "error-tip bi-error", - ref: function (_ref) { - self.error = _ref; - }, - invisible: true + items: [ + { + el: extend({}, o.el, { + ref (_ref) { + self.field = _ref; + o.el.ref && o.el.ref.call(this, _ref); + }, + height: o.el.height || 28, + listeners: concat(o.el.listeners, [ + { + eventName: "EVENT_CHANGE", + action () { + self.fireEvent("EVENT_CHANGE"); + }, + }, + { + eventName: "EVENT_CONFIRM", + action () { + self.fireEvent("EVENT_CONFIRM"); + }, + } + ]), + }), + left: 0, + bottom: 0, + right: 0, + top: 0, }, - bottom: -20, - left: 0, - right: 0, - height: 20 - }] + { + el: { + type: "bi.label", + cls: "error-tip bi-error", + ref (_ref) { + self.error = _ref; + }, + invisible: true, + }, + bottom: -20, + left: 0, + right: 0, + height: 20, + } + ], }; return { type: "bi.vertical_adapt", columnSize: ["auto", "fill"], - verticalAlign: BI.VerticalAlign.Stretch, - items: BI.isKey(o.label) ? [{ - el: { - type: "bi.label", - textAlign: o.labelAlign, - text: o.label, - width: o.labelWidth, - cls: o.headerCls, - rgap: 20 // 表单文字与右侧输入间距均为20px - } - }, field] : [field] + verticalAlign: VerticalAlign.Stretch, + items: isKey(o.label) + ? [ + { + el: { + type: "bi.label", + textAlign: o.labelAlign, + text: o.label, + width: o.labelWidth, + cls: o.headerCls, + rgap: 20, // 表单文字与右侧输入间距均为20px + }, + }, + field + ] + : [field], }; - }, + } - getValue: function () { + getValue () { return this.field.getValue(); - }, + } - validate: function () { - var isValid = this.validateWithNoTip(); - !isValid && this.error.setText(this.options.tip(this.field.getValue(), this.field)); + validate () { + const isValid = this.validateWithNoTip(); + !isValid && + this.error.setText( + this.options.tip(this.field.getValue(), this.field) + ); this.error.setVisible(!isValid); this.field.element[isValid ? "removeClass" : "addClass"]("bi-error"); return isValid; - }, + } - validateWithNoTip: function () { + validateWithNoTip () { return this.options.validate(this.field.getValue(), this.field); } -}); - -BI.shortcut("bi.form_field", BI.FormField); +} diff --git a/src/component/form/form.js b/src/component/form/form.js index de8caeaea..d79714569 100644 --- a/src/component/form/form.js +++ b/src/component/form/form.js @@ -1,45 +1,39 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2022/1/11 - */ - BI.Form = BI.inherit(BI.Widget, { +import { shortcut, Widget, map, some, each } from "@/core"; +import { ButtonGroup } from "@/base"; - props: { +@shortcut() +export class Form extends Widget { + static xtype = "bi.custom_form"; + + props = { baseCls: "bi-form", labelAlign: "right", - layout: { - type: "bi.vertical", - vgap: 20 - }, - items: [{ - validate: BI.emptyFn, - tip: BI.emptyFn, - label: "", - el: {} - }], + layout: { type: "bi.vertical", vgap: 20 }, + items: [{ label: "", el: {} }], labelWidth: "", - headerCls: "", // 左侧文字样式 - }, + headerCls: "", + }; + + static EVENT_CHANGE = "EVENT_CHANGE"; - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; return { - type: "bi.button_group", + type: ButtonGroup.xtype, items: this._createItems(), layouts: [o.layout], - ref: function (ref) { - self.group = ref; - } + ref: _ref => { + this.group = _ref; + }, }; - }, + } - _createItems: function () { - var self = this; - var o = this.options; + _createItems() { + const self = this; + const o = this.options; - return BI.map(o.items, function (idx, item) { + return map(o.items, (idx, item) => { return { type: "bi.form_field", height: item.el.height || 28, @@ -50,46 +44,43 @@ label: item.label, tip: item.tip, validate: item.validate, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent(BI.Form.EVENT_CHANGE, this.validate()); + listeners: [ + { + eventName: "EVENT_CHANGE", + action () { + self.fireEvent(Form.EVENT_CHANGE, this.validate()); + }, } - }] + ], }; }); - }, + } - isAllValid: function () { - return !BI.some(this.validateWithNoTip(), function (idx, v) { - return !v; - }); - }, + isAllValid() { + return !some(this.validateWithNoTip(), (idx, v) => !v); + } - validateWithNoTip: function () { - var validInfo = []; - BI.each(this.group.getAllButtons(), function (idx, button) { + validateWithNoTip() { + const validInfo = []; + each(this.group.getAllButtons(), (idx, button) => { validInfo.push(button.validateWithNoTip()); }); return validInfo; - }, + } - validate: function () { - var validInfo = []; - BI.each(this.group.getAllButtons(), function (idx, button) { + validate() { + const validInfo = []; + each(this.group.getAllButtons(), (idx, button) => { validInfo.push(button.validate()); }); return validInfo; - }, - - getValue: function () { - return !this.isAllValid() ? null : BI.map(this.group.getAllButtons(), function (idx, button) { - return button.getValue(); - }); } -}); -BI.Form.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.custom_form", BI.Form); + getValue() { + return !this.isAllValid() + ? null + : map(this.group.getAllButtons(), (idx, button) => button.getValue()); + } +} diff --git a/src/component/form/index.js b/src/component/form/index.js new file mode 100644 index 000000000..c2ffb7651 --- /dev/null +++ b/src/component/form/index.js @@ -0,0 +1,2 @@ +export { Form } from "./form"; +export { FormField } from "./form.field"; diff --git a/src/component/index.js b/src/component/index.js new file mode 100644 index 000000000..c6978e185 --- /dev/null +++ b/src/component/index.js @@ -0,0 +1,15 @@ +import * as allvaluechooser from "./allvaluechooser"; +import * as form from "./form"; +import { AllValueMultiTextValueCombo } from "./allvaluemultitextvaluecombo/allvalue.multitextvalue.combo"; + +Object.assign(BI, { + ...allvaluechooser, + ...form, + AllValueMultiTextValueCombo, +}); + +export * from "./allvaluechooser"; +export * from "./form"; +export { + AllValueMultiTextValueCombo +}; From 176b402e0ba76e43385dd5060573bd466fceaef5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Fri, 13 Jan 2023 16:10:30 +0800 Subject: [PATCH 4/6] =?UTF-8?q?KERNEL-14100=20refactor:=20widget/yearquart?= =?UTF-8?q?er=E3=80=81yearquarterinterval=20es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widget/index.js | 9 +- .../yearquarter/card.dynamic.yearquarter.js | 293 ++++++----- .../yearquarter/card.static.yearquarter.js | 260 +++++----- src/widget/yearquarter/combo.yearquarter.js | 345 +++++++------ src/widget/yearquarter/index.js | 6 + src/widget/yearquarter/popup.yearquarter.js | 437 ++++++++++------- src/widget/yearquarter/trigger.yearquarter.js | 461 +++++++++++------- .../yearquarterinterval.js | 315 +++++++----- 8 files changed, 1255 insertions(+), 871 deletions(-) create mode 100644 src/widget/yearquarter/index.js diff --git a/src/widget/index.js b/src/widget/index.js index acd1aaf9d..82404bf6a 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -10,6 +10,7 @@ import * as editor from "./editor"; import * as downList from "./downlist"; import * as singleSliderItem from "./singleslider"; import * as intervalSliderItem from "./intervalslider"; +import * as yearQuarter from "./yearquarter"; import { SelectTreeCombo } from "./selecttree/selecttree.combo"; import { SingleTreeCombo } from "./singletree/singletree.combo"; import { MultiTreeCombo } from "./multitree/multi.tree.combo"; @@ -17,6 +18,7 @@ import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo"; import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; import { NumberEditor } from "./numbereditor/number.editor"; import { NumberInterval } from "./numberinterval/numberinterval"; +import { YearQuarterInterval } from "./yearquarterinterval/yearquarterinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; import * as multilayerselectree from "./multilayerselecttree"; @@ -41,6 +43,7 @@ Object.assign(BI, { ...downList, ...singleSliderItem, ...intervalSliderItem, + ...yearQuarter, SelectTreeCombo, SingleTreeCombo, MultiTreeCombo, @@ -49,6 +52,7 @@ Object.assign(BI, { NumberEditor, NumberInterval, YearInterval, + YearQuarterInterval, ...multiselect, ...multiselectlist, ...multilayerselectree, @@ -75,7 +79,7 @@ export * from "./multilayersingletree"; export * from "./multilayerselecttree"; export * from "./singleselect"; export * from "./multilayerdownlist"; -export * from "./multilayersingletree"; +export * from "./yearquarter"; export { Collapse, @@ -86,5 +90,6 @@ export { MultiTreeCombo, MultiTreeInsertCombo, MultiTreeListCombo, - YearInterval + YearInterval, + YearQuarterInterval }; diff --git a/src/widget/yearquarter/card.dynamic.yearquarter.js b/src/widget/yearquarter/card.dynamic.yearquarter.js index 9e66e5202..667d7f8c3 100644 --- a/src/widget/yearquarter/card.dynamic.yearquarter.js +++ b/src/widget/yearquarter/card.dynamic.yearquarter.js @@ -1,166 +1,213 @@ -/** - * 年季度展示面板 - * - * Created by GUY on 2015/9/2. - * @class BI.YearCard - * @extends BI.Trigger - */ -BI.DynamicYearQuarterCard = BI.inherit(BI.Widget, { - - props: { - baseCls: "bi-year-quarter-card" - }, - - render: function () { - var self = this; +import { + shortcut, + Widget, + i18nText, + bind, + VerticalLayout, + parseDateTime, + extend, + checkDateVoid, + isNotEmptyString, + getQuarter +} from "@/core"; +import { DynamicDateCard, DynamicDateParamItem, DynamicDateHelper } from "../dynamicdate"; +import { Label, Bubbles } from "@/base"; + +@shortcut() +export class DynamicYearQuarterCard extends Widget { + static xtype = "bi.dynamic_year_quarter_card"; + + props = { baseCls: "bi-year-quarter-card" }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + render() { return { - type: "bi.vertical", - items: [{ - type: "bi.label", - text: BI.i18nText("BI-Multi_Date_Relative_Current_Time"), - textAlign: "left", - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - }, { - type: "bi.vertical", - ref: function (_ref) { - self.wrapper = _ref; + type: VerticalLayout.xtype, + items: [ + { + type: Label.xtype, + text: i18nText("BI-Multi_Date_Relative_Current_Time"), + textAlign: "left", + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }, - items: [{ - el: { - type: "bi.dynamic_date_param_item", - validationChecker: BI.bind(self._checkDate, self), - ref: function () { - self.year = this; - }, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } - }, { - eventName: "EVENT_INPUT_CHANGE", - action: function () { - BI.Bubbles.hide("dynamic-year-quarter-error"); - } - }] - }, - bgap: 10 - }, { - type: "bi.dynamic_date_param_item", - dateType: BI.DynamicDateCard.TYPE.QUARTER, - ref: function () { - self.quarter = this; + { + type: VerticalLayout.xtype, + ref: _ref => { + this.wrapper = _ref; }, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } - }, { - eventName: "EVENT_INPUT_CHANGE", - action: function () { - BI.Bubbles.hide("dynamic-year-quarter-error"); + items: [ + { + el: { + type: DynamicDateParamItem.xtype, + validationChecker: bind(this._checkDate, this), + ref: _ref => { + this.year = _ref; + }, + listeners: [ + { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + }, + { + eventName: "EVENT_INPUT_CHANGE", + action: () => { + Bubbles.hide( + "dynamic-year-quarter-error" + ); + }, + } + ], + }, + bgap: 10, + }, + { + type: DynamicDateParamItem.xtype, + dateType: DynamicDateCard.TYPE.QUARTER, + ref: _ref => { + this.quarter = _ref; + }, + listeners: [ + { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + }, + { + eventName: "EVENT_INPUT_CHANGE", + action: () => { + Bubbles.hide( + "dynamic-year-quarter-error" + ); + }, + } + ], } - }] - }] - }], + ], + } + ], vgap: 10, - hgap: 10 + hgap: 10, }; - }, + } - _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_Quarter_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_Quarter_Range_Error", start.getFullYear(), - BI.getQuarter(start), + getQuarter(start), end.getFullYear(), - BI.getQuarter(end) + getQuarter(end) ); - }, + } - _checkDate: function (obj) { - var o = this.options; - var date = BI.DynamicDateHelper.getCalculation(BI.extend(this._getValue(), this._digestDateTypeValue(obj))); + _checkDate(obj) { + const o = this.options; + const date = DynamicDateHelper.getCalculation( + extend(this._getValue(), this._digestDateTypeValue(obj)) + ); - 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]; + } - _digestDateTypeValue: function (value) { - var valueMap = {}; + _digestDateTypeValue(value) { + const valueMap = {}; switch (value.dateType) { - case BI.DynamicDateCard.TYPE.YEAR: - valueMap.year = (value.offset === 0 ? -value.value : +value.value); - break; - case BI.DynamicDateCard.TYPE.QUARTER: - valueMap.quarter = (value.offset === 0 ? -value.value : +value.value); - break; - default: - break; + case DynamicDateCard.TYPE.YEAR: + valueMap.year = + value.offset === 0 ? -value.value : +value.value; + break; + case DynamicDateCard.TYPE.QUARTER: + valueMap.quarter = + value.offset === 0 ? -value.value : +value.value; + break; + default: + break; } + return valueMap; - }, + } - _createValue: function (type, v) { + _createValue(type, v) { return { dateType: type, value: Math.abs(v), - offset: v > 0 ? 1 : 0 + offset: v > 0 ? 1 : 0, }; - }, + } - 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, quarter: 0}; - this.year.setValue(this._createValue(BI.DynamicDateCard.TYPE.YEAR, v.year)); - this.quarter.setValue(this._createValue(BI.DynamicDateCard.TYPE.QUARTER, v.quarter)); - }, + setValue(v) { + v = v || { year: 0, quarter: 0 }; + this.year.setValue( + this._createValue(DynamicDateCard.TYPE.YEAR, v.year) + ); + this.quarter.setValue( + this._createValue(DynamicDateCard.TYPE.QUARTER, v.quarter) + ); + } - _getValue: function () { - var year = this.year.getValue(); - var quarter = this.quarter.getValue(); + _getValue() { + const year = this.year.getValue(); + const quarter = this.quarter.getValue(); + return { - year: (year.offset === 0 ? -year.value : year.value), - quarter: (quarter.offset === 0 ? -quarter.value : quarter.value) + year: year.offset === 0 ? -year.value : year.value, + quarter: quarter.offset === 0 ? -quarter.value : quarter.value, }; - }, + } - getInputValue: function () { + getInputValue() { return this._getValue(); - }, + } - getValue: function () { + getValue() { return this.checkValidation() ? this._getValue() : {}; - }, + } - checkValidation: function (show) { - var errorText; - var yearInvalid = !this.year.checkValidation(); - var quarterInvalid = !this.quarter.checkValidation(); - var invalid = yearInvalid || quarterInvalid; + checkValidation(show) { + let errorText; + const yearInvalid = !this.year.checkValidation(); + const quarterInvalid = !this.quarter.checkValidation(); + let invalid = yearInvalid || quarterInvalid; 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-quarter-error", errorText, this.wrapper); + invalid && + show && + Bubbles.show( + "dynamic-year-quarter-error", + errorText, + this.wrapper + ); return !invalid; - }, -}); -BI.DynamicYearQuarterCard.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.dynamic_year_quarter_card", BI.DynamicYearQuarterCard); \ No newline at end of file + } +} diff --git a/src/widget/yearquarter/card.static.yearquarter.js b/src/widget/yearquarter/card.static.yearquarter.js index cf54c6fcf..811b430e4 100644 --- a/src/widget/yearquarter/card.static.yearquarter.js +++ b/src/widget/yearquarter/card.static.yearquarter.js @@ -1,152 +1,190 @@ -BI.StaticYearQuarterCard = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + map, + extend, + VerticalLayout, + parseDateTime, + parseInt, + each, + checkDateVoid, + getDate, + getQuarterName, + getQuarter +} from "@/core"; +import { TextItem, ButtonGroup } from "@/base"; +import { YearPicker } from "../date/calendar"; - props: { - baseCls: "bi-static-year-quarter-card", - behaviors: {} - }, +@shortcut() +export class StaticYearQuarterCard extends Widget { + static xtype = "bi.static_year_quarter_card"; - _createQuarter: function () { - var self = this; - var items = [{ - text: BI.getQuarterName(1), - value: 1 - }, { - text: BI.getQuarterName(2), - value: 2 - }, { - text: BI.getQuarterName(3), - value: 3 - }, { - text: BI.getQuarterName(4), - value: 4 - }]; - return BI.map(items, function (j, item) { - return BI.extend(item, { - type: "bi.text_item", - cls: "bi-border-radius bi-list-item-select", - textAlign: "center", - whiteSpace: "nowrap", - once: false, - forceSelected: true, - height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, - ref: function (_ref) { - self.quarterMap[j + 1] = _ref; - } - }); - }); - }, + props = { baseCls: "bi-static-year-quarter-card", behaviors: {} }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _createQuarter() { + const items = [ + { + text: getQuarterName(1), + value: 1, + }, + { + text: getQuarterName(2), + value: 2, + }, + { + text: getQuarterName(3), + value: 3, + }, + { + text: getQuarterName(4), + value: 4, + } + ]; + + return map(items, (j, item) => extend(item, { + type: TextItem.xtype, + cls: "bi-border-radius bi-list-item-select", + textAlign: "center", + whiteSpace: "nowrap", + once: false, + forceSelected: true, + height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + ref: _ref => { + this.quarterMap[j + 1] = _ref; + }, + })); + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; this.quarterMap = {}; + return { - type: "bi.vertical", - items: [{ - type: "bi.year_picker", - cls: "bi-split-bottom", - ref: function () { - self.yearPicker = this; - }, - min: o.min, - max: o.max, - behaviors: o.behaviors, - height: 30, - listeners: [{ - eventName: BI.YearPicker.EVENT_CHANGE, - action: function () { - var value = this.getValue(); - self._checkQuarterStatus(value); - self.setValue({ - year: value, - quarter: self.selectedQuarter - }); - } - }] - }, { - el: { - type: "bi.button_group", - behaviors: o.behaviors, - ref: function () { - self.quarter = this; + type: VerticalLayout.xtype, + items: [ + { + type: YearPicker.xtype, + cls: "bi-split-bottom", + ref: _ref => { + this.yearPicker = _ref; }, - items: this._createQuarter(), - layouts: [{ - type: "bi.vertical", - vgap: 10, - hgap: 12, - }], - value: o.value, - listeners: [{ - eventName: BI.ButtonGroup.EVENT_CHANGE, - action: function () { - self.selectedYear = self.yearPicker.getValue(); - self.selectedQuarter = this.getValue()[0]; - self.fireEvent(BI.StaticYearQuarterCard.EVENT_CHANGE); + min: o.min, + max: o.max, + behaviors: o.behaviors, + height: 30, + listeners: [ + { + eventName: YearPicker.EVENT_CHANGE, + action: () => { + const value = this.yearPicker.getValue(); + this._checkQuarterStatus(value); + this.setValue({ + year: value, + quarter: this.selectedQuarter, + }); + }, } - }] + ], }, - vgap: 5 - }] + { + el: { + type: ButtonGroup.xtype, + behaviors: o.behaviors, + ref: _ref => { + this.quarter = _ref; + }, + items: this._createQuarter(), + layouts: [ + { + type: VerticalLayout.xtype, + vgap: 10, + hgap: 12, + } + ], + value: o.value, + listeners: [ + { + eventName: ButtonGroup.EVENT_CHANGE, + action: () => { + this.selectedYear = + this.yearPicker.getValue(); + this.selectedQuarter = this.quarter.getValue()[0]; + this.fireEvent( + StaticYearQuarterCard.EVENT_CHANGE + ); + }, + } + ], + }, + vgap: 5, + } + ], }; - }, + } - _checkQuarterStatus: function (year) { - var o = this.options; - var minDate = BI.parseDateTime(o.min, "%Y-%X-%d"), maxDate = BI.parseDateTime(o.max, "%Y-%X-%d"); - var minYear = minDate.getFullYear(), maxYear = maxDate.getFullYear(); - var minQuarter = 1; var maxQuarter = 4; - minYear === year && (minQuarter = BI.parseInt(BI.getQuarter(minDate))); - maxYear === year && (maxQuarter = BI.parseInt(BI.getQuarter(maxDate))); - var yearInvalid = year < minYear || year > maxYear; - BI.each(this.quarterMap, function (quarter, obj) { - var quarterInvalid = quarter < minQuarter || quarter > maxQuarter; + _checkQuarterStatus(year) { + const o = this.options; + const minDate = parseDateTime(o.min, "%Y-%X-%d"), + maxDate = parseDateTime(o.max, "%Y-%X-%d"); + const minYear = minDate.getFullYear(), + maxYear = maxDate.getFullYear(); + let minQuarter = 1; + let maxQuarter = 4; + minYear === year && (minQuarter = parseInt(getQuarter(minDate))); + maxYear === year && (maxQuarter = parseInt(getQuarter(maxDate))); + const yearInvalid = year < minYear || year > maxYear; + each(this.quarterMap, (quarter, obj) => { + const quarterInvalid = quarter < minQuarter || quarter > maxQuarter; obj.setEnable(!yearInvalid && !quarterInvalid); }); - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.min !== minDate) { this.options.min = minDate; this.yearPicker.setMinDate(minDate); this._checkQuarterStatus(this.selectedYear); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.max !== maxDate) { this.options.max = maxDate; this.yearPicker.setMaxDate(maxDate); this._checkQuarterStatus(this.selectedYear); } - }, - + } - getValue: function () { + getValue() { return { year: this.selectedYear, - quarter: this.selectedQuarter + quarter: this.selectedQuarter, }; - }, + } - setValue: function (obj) { - var o = this.options; - var newObj = {}; + setValue(obj) { + const o = this.options; + const newObj = {}; newObj.year = obj.year || 0; newObj.quarter = obj.quarter || 0; - if (newObj.quarter === 0 || newObj.year === 0 || BI.checkDateVoid(newObj.year, newObj.quarter, 1, o.min, o.max)[0]) { - var year = newObj.year || BI.getDate().getFullYear(); + if ( + newObj.quarter === 0 || + newObj.year === 0 || + checkDateVoid(newObj.year, newObj.quarter, 1, o.min, o.max)[0] + ) { + const year = newObj.year || getDate().getFullYear(); this.selectedYear = year; this.selectedQuarter = ""; this.yearPicker.setValue(year); this.quarter.setValue(); } else { - this.selectedYear = BI.parseInt(newObj.year); - this.selectedQuarter = BI.parseInt(newObj.quarter); + this.selectedYear = parseInt(newObj.year); + this.selectedQuarter = parseInt(newObj.quarter); this.yearPicker.setValue(this.selectedYear); this.quarter.setValue(this.selectedQuarter); } this._checkQuarterStatus(this.selectedYear); } -}); -BI.StaticYearQuarterCard.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.static_year_quarter_card", BI.StaticYearQuarterCard); +} diff --git a/src/widget/yearquarter/combo.yearquarter.js b/src/widget/yearquarter/combo.yearquarter.js index b7f04c4bd..7ce72d6fb 100644 --- a/src/widget/yearquarter/combo.yearquarter.js +++ b/src/widget/yearquarter/combo.yearquarter.js @@ -1,72 +1,102 @@ -BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + createWidget, + toPix, + isEqual, + isNotEmptyString, + getDate, + AbsoluteLayout, + HorizontalFillLayout, + isNotNull, + isNotEmptyObject, + checkDateVoid, + getQuarter +} from "@/core"; +import { DynamicYearQuarterTrigger } from "./trigger.yearquarter"; +// TODO:需要等待yearmonth完成才能将BI.DynamicYearMonthTrigger替换 +// import { DynamicYearMonthCombo } from "../yearmonth/combo.yearmonth"; +import { DynamicYearQuarterPopup } from "./popup.yearquarter"; +import { DynamicDateCombo } from "../dynamicdate"; +import { Combo, IconButton } from "@/base"; - _consts: { - iconWidth: 24 - }, - props: { +@shortcut() +export class DynamicYearQuarterCombo extends Widget { + static xtype = "bi.dynamic_year_quarter_combo"; + + _consts = { iconWidth: 24 }; + props = { baseCls: "bi-year-quarter-combo", behaviors: {}, - minDate: "1900-01-01", // 最小日期 - maxDate: "2099-12-31", // 最大日期 + minDate: "1900-01-01", + maxDate: "2099-12-31", height: 24, supportDynamic: true, isNeedAdjustHeight: false, - isNeedAdjustWidth: false - }, + isNeedAdjustWidth: false, + }; + + 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"; + static Static = 1; + static Dynamic = 2; - _init: function () { - var self = this, o = this.options; - BI.DynamicYearQuarterCombo.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); this.storeValue = o.value; - var border = o.simple ? 1 : 2; - self.storeTriggerValue = ""; - this.trigger = BI.createWidget({ + const border = o.simple ? 1 : 2; + this.storeTriggerValue = ""; + this.trigger = createWidget({ type: "bi.dynamic_year_quarter_trigger", 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, }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN, function () { - self.combo.isViewVisible() && self.combo.hideView(); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_KEY_DOWN, () => { + this.combo.isViewVisible() && this.combo.hideView(); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_START, function () { - self.combo.isViewVisible() && self.combo.hideView(); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_START, () => { + this.combo.isViewVisible() && this.combo.hideView(); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_STOP, function () { - self.combo.showView(); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_STOP, () => { + this.combo.showView(); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_ERROR, function () { - self.combo.isViewVisible() && self.combo.hideView(); - self.comboWrapper.element.addClass("error"); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_ERROR); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_ERROR, () => { + this.combo.isViewVisible() && this.combo.hideView(); + this.comboWrapper.element.addClass("error"); + this.fireEvent(DynamicYearQuarterCombo.EVENT_ERROR); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_VALID, function () { - self.comboWrapper.element.removeClass("error"); - self.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_VALID, () => { + this.comboWrapper.element.removeClass("error"); + this.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM, function () { - var dateStore = self.storeTriggerValue; - var dateObj = self.trigger.getKey(); - if (BI.isEqual(dateObj, dateStore)) { + this.trigger.on(DynamicYearQuarterTrigger.EVENT_CONFIRM, () => { + const dateStore = this.storeTriggerValue; + const dateObj = this.trigger.getKey(); + if (isEqual(dateObj, dateStore)) { return; } - if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { - self.storeValue = self.trigger.getValue(); - self.setValue(self.trigger.getValue()); + if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) { + this.storeValue = this.trigger.getValue(); + this.setValue(this.trigger.getValue()); } - self._checkDynamicValue(self.storeValue); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); + this._checkDynamicValue(this.storeValue); + this.fireEvent(DynamicYearQuarterCombo.EVENT_CONFIRM); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_FOCUS, function () { - self.storeTriggerValue = self.trigger.getKey(); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_FOCUS); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_FOCUS, () => { + this.storeTriggerValue = this.trigger.getKey(); + this.fireEvent(DynamicYearQuarterCombo.EVENT_FOCUS); }); - this.combo = BI.createWidget({ - type: "bi.combo", + this.combo = createWidget({ + type: Combo.xtype, container: o.container, isNeedAdjustHeight: o.isNeedAdjustHeight, isNeedAdjustWidth: o.isNeedAdjustWidth, @@ -80,172 +110,185 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, { type: "bi.dynamic_year_quarter_popup", width: o.isNeedAdjustWidth ? o.width : undefined, supportDynamic: o.supportDynamic, - ref: function () { - self.popup = this; + ref: _ref => { + this.popup = _ref; }, listeners: [ { - eventName: BI.DynamicYearQuarterPopup.EVENT_CHANGE, - action: function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE, - action: function () { - self.setValue(); - self.comboWrapper.element.removeClass("error"); - self.combo.hideView(); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE, - action: function () { - var date = BI.getDate(); - self.setValue({ + eventName: DynamicYearQuarterPopup.EVENT_CHANGE, + action: () => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent( + DynamicYearQuarterCombo.EVENT_CONFIRM + ); + }, + }, + { + eventName: + DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE, + action: () => { + this.setValue(); + this.comboWrapper.element.removeClass("error"); + this.combo.hideView(); + this.fireEvent( + DynamicYearQuarterCombo.EVENT_CONFIRM + ); + }, + }, + { + eventName: + DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE, + action: () => { + const date = getDate(); + this.setValue({ type: BI.DynamicYearMonthCombo.Static, - value: { year: date.getFullYear(), quarter: BI.getQuarter(date) } + value: { + year: date.getFullYear(), + quarter: getQuarter(date), + }, }); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE, - action: function () { - var value = self.popup.getValue(); - if (self._checkValue(value)) { - self.setValue(value); + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, + }, + { + eventName: + DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE, + action: () => { + const value = this.popup.getValue(); + if (this._checkValue(value)) { + this.setValue(value); } - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + 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.DynamicYearQuarterCombo.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(DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW); }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + 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", + type: IconButton.xtype, cls: "bi-trigger-icon-button date-change-h-font", width: this._consts.iconWidth, - height: BI.toPix(o.height, border), - ref: function () { - self.changeIcon = this; - } - } - }, this.combo - ] + height: toPix(o.height, border), + ref: _ref => { + this.changeIcon = _ref; + }, + }, + }, + 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.DynamicYearQuarterCombo.Dynamic: - this.changeIcon.setVisible(true); - break; - default: - this.changeIcon.setVisible(false); - break; + case DynamicYearQuarterCombo.Dynamic: + this.changeIcon.setVisible(true); + break; + default: + this.changeIcon.setVisible(false); + break; } - }, + } - _checkValue: function (v) { - var o = this.options; + _checkValue(v) { + const o = this.options; + let value; switch (v.type) { - case BI.DynamicDateCombo.Dynamic: - return BI.isNotEmptyObject(v.value); - case BI.DynamicDateCombo.Static: - var value = v.value || {}; - - return !BI.checkDateVoid(value.year, (value.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0]; - default: - return true; + case DynamicDateCombo.Dynamic: + return isNotEmptyObject(v.value); + case DynamicDateCombo.Static: + value = v.value || {}; + + return !checkDateVoid( + value.year, + (value.quarter - 1) * 3 + 1, + 1, + o.minDate, + o.maxDate + )[0]; + default: + return true; } - }, + } - 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 () { + 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.isStateValid(); } - -}); -BI.DynamicYearQuarterCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.DynamicYearQuarterCombo.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicYearQuarterCombo.EVENT_VALID = "EVENT_VALID"; -BI.DynamicYearQuarterCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.shortcut("bi.dynamic_year_quarter_combo", BI.DynamicYearQuarterCombo); - -BI.extend(BI.DynamicYearQuarterCombo, { - Static: 1, - Dynamic: 2 -}); +} diff --git a/src/widget/yearquarter/index.js b/src/widget/yearquarter/index.js new file mode 100644 index 000000000..29b16b492 --- /dev/null +++ b/src/widget/yearquarter/index.js @@ -0,0 +1,6 @@ +export { DynamicYearQuarterCard } from "./card.dynamic.yearquarter"; +export { StaticYearQuarterCard } from "./card.static.yearquarter"; +export { DynamicYearQuarterCombo } from "./combo.yearquarter"; +export { DynamicYearQuarterPopup } from "./popup.yearquarter"; +export { DynamicYearQuarterTrigger } from "./trigger.yearquarter"; + diff --git a/src/widget/yearquarter/popup.yearquarter.js b/src/widget/yearquarter/popup.yearquarter.js index 6cfbc519a..f134f384e 100644 --- a/src/widget/yearquarter/popup.yearquarter.js +++ b/src/widget/yearquarter/popup.yearquarter.js @@ -1,235 +1,328 @@ -BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, { - constants: { - tabHeight: 40, - buttonHeight: 24 - }, +import { + shortcut, + Widget, + toPix, + i18nText, + VerticalLayout, + GridLayout, + print, + getDate, + checkDateVoid, + createItems, + getQuarter +} from "@/core"; +import { DynamicYearQuarterCombo } from "./combo.yearquarter"; +import { TextButton, Tab } from "@/base"; +import { DynamicDateCombo, DynamicDatePopup, DynamicDateHelper } from "../dynamicdate"; +// TODO:需要等待year完成才能将BI.DynamicYearCard替换 +// import { DynamicYearCard } from "../year/card.dynamic.year"; +import { LinearSegment } from "@/case"; +import { DynamicYearQuarterCard } from "./card.dynamic.yearquarter"; +import { StaticYearQuarterCard } from "./card.static.yearquarter"; - props: { +@shortcut() +export class DynamicYearQuarterPopup extends Widget { + static xtype = "bi.dynamic_year_quarter_popup"; + + constants = { tabHeight: 40, buttonHeight: 24 }; + props = { baseCls: "bi-year-quarter-popup", behaviors: {}, - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期, + min: "1900-01-01", + max: "2099-12-31", width: 180, supportDynamic: true, - }, + }; + + 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.DynamicYearQuarterCombo.Static}; + render() { + this.storeValue = { type: DynamicYearQuarterCombo.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", - shadow: true, - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - text: BI.i18nText("BI-Basic_Clear"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-split-left bi-split-right bi-high-light bi-split-top", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Basic_Current_Quarter"), - disabled: this._checkTodayValid(), - ref: function () { - self.textButton = this; - }, - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-split-top bi-high-light", - shadow: true, - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - 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.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE); - } else { - self.fireEvent(BI.DynamicYearQuarterPopup.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", + shadow: true, + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + text: i18nText("BI-Basic_Clear"), + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent( + DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE + ); + }, + } + ], + }, + { + type: TextButton.xtype, + cls: "bi-split-left bi-split-right bi-high-light bi-split-top", + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + shadow: true, + text: i18nText("BI-Basic_Current_Quarter"), + disabled: this._checkTodayValid(), + ref: _ref => { + this.textButton = _ref; + }, + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent( + DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE + ); + }, + } + ], + }, + { + type: TextButton.xtype, + cls: "bi-split-top bi-high-light", + shadow: true, + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + 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( + DynamicDatePopup.BUTTON_OK_EVENT_CHANGE + ); + } else { + this.fireEvent(DynamicYearQuarterPopup + .BUTTON_OK_EVENT_CHANGE + ); + } + }, + } + ], + } + ] + ], + height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + }, + } + ], }; - }, + } - _setInnerValue: function () { - if (this.dateTab.getSelect() === BI.DynamicYearQuarterCombo.Static) { - this.textButton.setValue(BI.i18nText("BI-Basic_Current_Quarter")); + _setInnerValue() { + if (this.dateTab.getSelect() === DynamicYearQuarterCombo.Static) { + this.textButton.setValue(i18nText("BI-Basic_Current_Quarter")); this.textButton.setEnable(!this._checkTodayValid()); } else { - var date = BI.DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); - date = BI.print(date, "%Y-%Q"); + let date = DynamicDateHelper.getCalculation( + this.dynamicPane.getInputValue() + ); + date = print(date, "%Y-%Q"); this.textButton.setValue(date); this.textButton.setEnable(false); } - }, + } - _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]; + } - _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, cls: "bi-split-bottom", invisible: !o.supportDynamic, height: this.constants.tabHeight, - items: BI.createItems([{ - text: BI.i18nText("BI-Basic_Year_Quarter"), - value: BI.DynamicYearQuarterCombo.Static - }, { - text: BI.i18nText("BI-Basic_Dynamic_Title"), - value: BI.DynamicYearQuarterCombo.Dynamic - }], { - textAlign: "center" - }) + items: createItems( + [ + { + text: i18nText("BI-Basic_Year_Quarter"), + value: DynamicYearQuarterCombo.Static, + }, + { + text: i18nText("BI-Basic_Dynamic_Title"), + value: DynamicYearQuarterCombo.Dynamic, + } + ], + { + textAlign: "center", + } + ), }, - cardCreator: function (v) { + cardCreator: v => { switch (v) { - case BI.DynamicYearQuarterCombo.Dynamic: - return { - type: "bi.dynamic_year_quarter_card", - cls: "dynamic-year-quarter-pane", - min: self.options.min, - max: self.options.max, - listeners: [{ + case DynamicYearQuarterCombo.Dynamic: + return { + type: DynamicYearQuarterCard.xtype, + cls: "dynamic-year-quarter-pane", + min: this.options.min, + max: this.options.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.DynamicYearQuarterCombo.Static: - default: - return { - type: "bi.static_year_quarter_card", - behaviors: o.behaviors, - min: self.options.min, - max: self.options.max, - listeners: [{ + ], + ref: _ref => { + this.dynamicPane = _ref; + }, + }; + case DynamicYearQuarterCombo.Static: + default: + return { + type: StaticYearQuarterCard.xtype, + behaviors: o.behaviors, + min: this.options.min, + max: this.options.max, + listeners: [ + { eventName: BI.DynamicYearCard.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearQuarterPopup.EVENT_CHANGE); - } - }], - ref: function () { - self.year = this; + action: () => { + this.fireEvent( + DynamicYearQuarterPopup.EVENT_CHANGE + ); + }, } - }; + ], + ref: _ref => { + this.year = _ref; + }, + }; } }, - listeners: [{ - eventName: BI.Tab.EVENT_CHANGE, - action: function () { - var v = self.dateTab.getSelect(); - switch (v) { - case BI.DynamicYearQuarterCombo.Static: - var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); - self.year.setValue({year: date.getFullYear(), quarter: BI.getQuarter(date)}); - self._setInnerValue(); + listeners: [ + { + eventName: Tab.EVENT_CHANGE, + action: () => { + const v = this.dateTab.getSelect(); + let date; + switch (v) { + case DynamicYearQuarterCombo.Static: + date = DynamicDateHelper.getCalculation( + this.dynamicPane.getValue() + ); + this.year.setValue({ + year: date.getFullYear(), + quarter: getQuarter(date), + }); + this._setInnerValue(); break; - case BI.DynamicYearQuarterCombo.Dynamic: + case DynamicYearQuarterCombo.Dynamic: default: - if(self.storeValue && self.storeValue.type === BI.DynamicYearQuarterCombo.Dynamic) { - self.dynamicPane.setValue(self.storeValue.value); - }else{ - self.dynamicPane.setValue({ - year: 0 + if ( + this.storeValue && + this.storeValue.type === + DynamicYearQuarterCombo.Dynamic + ) { + this.dynamicPane.setValue( + this.storeValue.value + ); + } else { + this.dynamicPane.setValue({ + year: 0, }); } - self._setInnerValue(); + this._setInnerValue(); break; - } + } + }, } - }] + ], }; - }, + } - 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.textButton.setValue(BI.i18nText("BI-Basic_Current_Quarter")); - this.textButton.setEnable(!this._checkTodayValid()); - break; + case DynamicDateCombo.Dynamic: + this.dynamicPane.setValue(value); + this._setInnerValue(); + break; + case DynamicDateCombo.Static: + default: + this.year.setValue(value); + this.textButton.setValue(i18nText("BI-Basic_Current_Quarter")); + this.textButton.setEnable(!this._checkTodayValid()); + break; } - }, + } - getValue: function () { + getValue() { return { type: this.dateTab.getSelect(), - value: this.dateTab.getValue() + value: this.dateTab.getValue(), }; } - -}); -BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; -BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"; -BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; -BI.DynamicYearQuarterPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.dynamic_year_quarter_popup", BI.DynamicYearQuarterPopup); \ No newline at end of file +} diff --git a/src/widget/yearquarter/trigger.yearquarter.js b/src/widget/yearquarter/trigger.yearquarter.js index 876856379..cd31a3908 100644 --- a/src/widget/yearquarter/trigger.yearquarter.js +++ b/src/widget/yearquarter/trigger.yearquarter.js @@ -1,277 +1,374 @@ -BI.DynamicYearQuarterTrigger = BI.inherit(BI.Trigger, { - _const: { - hgap: 4, - vgap: 2, - iconWidth: 24 - }, +import { + shortcut, + i18nText, + createWidget, + HTapeLayout, + CenterLayout, + HorizontalFillLayout, + isEmptyString, + parseDateTime, + isPositiveInteger, + checkDateVoid, + isNotEmptyString, + isNotNull, + print, + checkDateLegal, + isNull, + parseInt, + getDate, + getQuarter +} from "@/core"; +import { Trigger, TextButton } from "@/base"; +import { TriggerIconButton, SignEditor } from "@/case"; +import { DynamicDateHelper } from "../dynamicdate"; +// TODO:需要等待yearmonth完成才能将BI.DynamicYearMonthTrigger替换 +// import { DynamicYearMonthTrigger } from "../yearmonth/trigger.yearmonth"; +import { DynamicYearQuarterCombo } from "./combo.yearquarter"; - props: () => ({ - extraCls: "bi-year-quarter-trigger", - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期 - height: 24, - watermark: { - year: BI.i18nText("BI-Basic_Unrestricted"), - quarter: BI.i18nText("BI-Basic_Unrestricted"), - }, - }), +@shortcut() +export class DynamicYearQuarterTrigger extends Trigger { + static xtype = "bi.dynamic_year_quarter_trigger"; - _init: function () { - BI.DynamicYearQuarterTrigger.superclass._init.apply(this, arguments); - var o = this.options; + _const = { hgap: 4, vgap: 2, iconWidth: 24 }; + + 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_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_VALID = "EVENT_VALID"; + + props() { + return { + extraCls: "bi-year-quarter-trigger", + min: "1900-01-01", // 最小日期 + max: "2099-12-31", // 最大日期 + height: 24, + watermark: { + year: i18nText("BI-Basic_Unrestricted"), + quarter: i18nText("BI-Basic_Unrestricted"), + }, + }; + } + + _init() { + super._init(...arguments); + const o = this.options; this.yearEditor = this._createEditor(true); this.quarterEditor = this._createEditor(false); // 暂时的解决方法 - var height = o.height + 2; + // const height = o.height + 2; - BI.createWidget({ + createWidget({ element: this, - type: "bi.htape", - items: [{ - type: "bi.center", - items: [{ - type: "bi.horizontal_fill", - columnSize: ["fill", ""], - items: [this.yearEditor, { - el: { - type: "bi.text_button", - text: BI.i18nText("BI-Multi_Date_Year"), - }, - }] - }, { - type: "bi.horizontal_fill", - columnSize: ["fill", ""], - items: [this.quarterEditor, { - el: { - type: "bi.text_button", - text: BI.i18nText("BI-Multi_Date_Quarter"), + type: HTapeLayout.xtype, + items: [ + { + type: CenterLayout.xtype, + items: [ + { + type: HorizontalFillLayout.xtype, + columnSize: ["fill", ""], + items: [ + this.yearEditor, + { + el: { + type: TextButton.xtype, + text: i18nText("BI-Multi_Date_Year"), + }, + } + ], }, - }] - }] - }, { - el: { - type: "bi.trigger_icon_button", - width: this._const.iconWidth, + { + type: HorizontalFillLayout.xtype, + columnSize: ["fill", ""], + items: [ + this.quarterEditor, + { + el: { + type: TextButton.xtype, + text: i18nText("BI-Multi_Date_Quarter"), + }, + } + ], + } + ], }, - width: this._const.iconWidth, - }] + { + el: { + type: TriggerIconButton.xtype, + width: this._const.iconWidth, + }, + width: this._const.iconWidth, + } + ], }); this.setValue(o.value); - }, + } - _createEditor: function (isYear) { - var self = this, o = this.options, c = this._const; - var editor = BI.createWidget({ - type: "bi.sign_editor", + _createEditor(isYear) { + const o = this.options, + c = this._const; + const editor = createWidget({ + type: SignEditor.xtype, simple: o.simple, height: o.height, - validationChecker: function (v) { - if(isYear) { - var month = self.quarterEditor.getValue(); - if(BI.isEmptyString(month)) { - month = parseInt(v, 10) === BI.parseDateTime(o.min, "%Y-%X-%d").getFullYear() ? BI.parseDateTime(o.min, "%Y-%X-%d").getMonth() + 1 : 1; + validationChecker: v => { + if (isYear) { + let month = this.quarterEditor.getValue(); + if (isEmptyString(month)) { + month = + parseInt(v, 10) === + parseDateTime(o.min, "%Y-%X-%d").getFullYear() + ? parseDateTime(o.min, "%Y-%X-%d").getMonth() + + 1 + : 1; } else { month = (parseInt(month, 10) - 1) * 3 + 1; } - return v === "" || (BI.isPositiveInteger(v) && !BI.checkDateVoid(v, month, 1, o.min, o.max)[0]); + + return ( + v === "" || + (isPositiveInteger(v) && + !checkDateVoid(v, month, 1, o.min, o.max)[0]) + ); } - var year = self.yearEditor.getValue(); + const year = this.yearEditor.getValue(); - return v === "" || ((BI.isPositiveInteger(v) && v >= 1 && v <= 4) && (BI.isEmptyString(year) ? true : !BI.checkDateVoid(self.yearEditor.getValue(), (v - 1) * 3 + 1, 1, o.min, o.max)[0])); - }, - quitChecker: function () { - return false; + return ( + v === "" || + (isPositiveInteger(v) && + v >= 1 && + v <= 4 && + (isEmptyString(year) + ? true + : !checkDateVoid( + this.yearEditor.getValue(), + (v - 1) * 3 + 1, + 1, + o.min, + o.max + )[0])) + ); }, - errorText: function (v) { - var year = isYear ? v : self.yearEditor.getValue(); - var quarter = isYear ? self.quarterEditor.getValue() : v; - if (!BI.isPositiveInteger(year) || !BI.isPositiveInteger(quarter) || quarter > 4) { - return BI.i18nText("BI-Year_Trigger_Invalid_Text"); + quitChecker: () => false, + errorText: v => { + const year = isYear ? v : this.yearEditor.getValue(); + const quarter = isYear ? this.quarterEditor.getValue() : v; + if ( + !isPositiveInteger(year) || + !isPositiveInteger(quarter) || + quarter > 4 + ) { + return i18nText("BI-Year_Trigger_Invalid_Text"); } - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); - return BI.i18nText("BI-Basic_Year_Quarter_Range_Error", + return i18nText( + "BI-Basic_Year_Quarter_Range_Error", start.getFullYear(), - BI.getQuarter(start), + getQuarter(start), end.getFullYear(), - BI.getQuarter(end) + getQuarter(end) ); }, watermark: isYear ? o.watermark?.year : o.watermark?.quarter, hgap: c.hgap, vgap: c.vgap, - allowBlank: true + allowBlank: true, }); - editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN); + editor.on(SignEditor.EVENT_KEY_DOWN, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_KEY_DOWN); }); - editor.on(BI.SignEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_FOCUS); + editor.on(SignEditor.EVENT_FOCUS, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_FOCUS); }); - editor.on(BI.SignEditor.EVENT_STOP, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_STOP); + editor.on(SignEditor.EVENT_STOP, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_STOP); }); - editor.on(BI.SignEditor.EVENT_CONFIRM, function () { - self._doEditorConfirm(editor); - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM); + editor.on(SignEditor.EVENT_CONFIRM, () => { + this._doEditorConfirm(editor); + this.fireEvent(DynamicYearQuarterTrigger.EVENT_CONFIRM); }); - editor.on(BI.SignEditor.EVENT_SPACE, function () { + editor.on(SignEditor.EVENT_SPACE, () => { if (editor.isValid()) { editor.blur(); } }); - editor.on(BI.SignEditor.EVENT_START, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_START); + editor.on(SignEditor.EVENT_START, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_START); }); - editor.on(BI.SignEditor.EVENT_ERROR, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_ERROR); + editor.on(SignEditor.EVENT_ERROR, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_ERROR); }); - editor.on(BI.SignEditor.EVENT_VALID, function () { - var year = self.yearEditor.getValue(); - var quarter = self.quarterEditor.getValue(); - if(BI.isNotEmptyString(year) && BI.isNotEmptyString(quarter)) { - if(BI.isPositiveInteger(year) && quarter >= 1 && quarter <= 4 && !BI.checkDateVoid(year, (quarter - 1) * 3 + 1, 1, o.min, o.max)[0]) { - self.fireEvent(BI.DynamicYearMonthTrigger.EVENT_VALID); + editor.on(SignEditor.EVENT_VALID, () => { + const year = this.yearEditor.getValue(); + const quarter = this.quarterEditor.getValue(); + if (isNotEmptyString(year) && isNotEmptyString(quarter)) { + if ( + isPositiveInteger(year) && + quarter >= 1 && + quarter <= 4 && + !checkDateVoid( + year, + (quarter - 1) * 3 + 1, + 1, + o.min, + o.max + )[0] + ) { + this.fireEvent(BI.DynamicYearMonthTrigger.EVENT_VALID); } } }); - editor.on(BI.SignEditor.EVENT_CHANGE, function () { - if(isYear) { - self._autoSwitch(editor); + editor.on(SignEditor.EVENT_CHANGE, () => { + if (isYear) { + this._autoSwitch(editor); } }); return editor; - }, + } - _doEditorConfirm: function (editor) { - var value = editor.getValue(); - if (BI.isNotNull(value)) { + _doEditorConfirm(editor) { + const value = editor.getValue(); + if (isNotNull(value)) { editor.setValue(value); } - var quarterValue = this.quarterEditor.getValue(); + const quarterValue = this.quarterEditor.getValue(); this.storeValue = { - type: BI.DynamicYearQuarterCombo.Static, + type: DynamicYearQuarterCombo.Static, value: { year: this.yearEditor.getValue(), - quarter: BI.isEmptyString(this.quarterEditor.getValue()) ? "" : quarterValue - } + quarter: isEmptyString(this.quarterEditor.getValue()) + ? "" + : quarterValue, + }, }; this.setTitle(this._getStaticTitle(this.storeValue.value)); - }, + } - _yearCheck: function (v) { - var date = BI.print(BI.parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d"); - return BI.print(BI.parseDateTime(v, "%Y"), "%Y") === v && date >= this.options.min && date <= this.options.max; - }, + _yearCheck(v) { + const date = print(parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d"); + + return ( + print(parseDateTime(v, "%Y"), "%Y") === v && + date >= this.options.min && + date <= this.options.max + ); + } - _autoSwitch: function (editor) { - var v = editor.getValue(); - if (BI.isNotEmptyString(v) && BI.checkDateLegal(v)) { + _autoSwitch(editor) { + const v = editor.getValue(); + if (isNotEmptyString(v) && checkDateLegal(v)) { if (v.length === 4 && this._yearCheck(v)) { this._doEditorConfirm(editor); - this.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM); + this.fireEvent(DynamicYearQuarterTrigger.EVENT_CONFIRM); this.quarterEditor.focus(); } } - }, + } - _getStaticTitle: function (value) { + _getStaticTitle(value) { value = value || {}; - var hasYear = !(BI.isNull(value.year) || BI.isEmptyString(value.year)); - var hasMonth = !(BI.isNull(value.quarter) || BI.isEmptyString(value.quarter)); + const hasYear = !(isNull(value.year) || isEmptyString(value.year)); + const hasMonth = !(isNull(value.quarter) || isEmptyString(value.quarter)); switch ((hasYear << 1) | hasMonth) { - // !hasYear && !hasMonth - case 0: - return ""; + // !hasYear && !hasMonth + case 0: + return ""; // !hasYear && hasMonth - case 1: - return value.quarter; + case 1: + return value.quarter; // hasYear && !hasMonth - case 2: - return value.year; + case 2: + return value.year; // hasYear && hasMonth - case 3: - default: - return value.year + "-" + value.quarter; + case 3: + default: + return `${value.year}-${value.quarter}`; } - }, + } - _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")); } - if(BI.isNotNull(obj.quarter) && BI.parseInt(obj.quarter) !== 0) { - value += Math.abs(obj.quarter) + BI.i18nText("BI-Basic_Single_Quarter") + (obj.quarter < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + if (isNotNull(obj.quarter) && parseInt(obj.quarter) !== 0) { + value += + Math.abs(obj.quarter) + + i18nText("BI-Basic_Single_Quarter") + + (obj.quarter < 0 + ? i18nText("BI-Basic_Front") + : i18nText("BI-Basic_Behind")); } + return value; - }, + } - _setInnerValue: function (date, text) { - var dateStr = BI.print(date, "%Y-%Q"); + _setInnerValue(date, text) { + const dateStr = print(date, "%Y-%Q"); this.yearEditor.setValue(date.getFullYear()); - this.quarterEditor.setValue(BI.getQuarter(date)); - this.setTitle(BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr)); - }, + this.quarterEditor.setValue(getQuarter(date)); + this.setTitle(isEmptyString(text) ? dateStr : `${text}:${dateStr}`); + } - 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) { - var type, value; - var date = BI.getDate(); + setValue(v) { + let type, value, text, quarter; + let date = getDate(); this.storeValue = v; - if (BI.isNotNull(v)) { - type = v.type || BI.DynamicYearQuarterCombo.Static; + if (isNotNull(v)) { + type = v.type || DynamicYearQuarterCombo.Static; value = v.value || v; } switch (type) { - case BI.DynamicYearQuarterCombo.Dynamic: - var text = this._getText(value); - date = BI.DynamicDateHelper.getCalculation(value); - this._setInnerValue(date, text); - break; - case BI.DynamicYearQuarterCombo.Static: - default: - value = value || {}; - var quarter = BI.isNull(value.quarter) ? null : value.quarter; - this.yearEditor.setValue(value.year); - this.quarterEditor.setValue(quarter); - this.setTitle(this._getStaticTitle(value)); - break; + case DynamicYearQuarterCombo.Dynamic: + text = this._getText(value); + date = DynamicDateHelper.getCalculation(value); + this._setInnerValue(date, text); + break; + case DynamicYearQuarterCombo.Static: + default: + value = value || {}; + quarter = isNull(value.quarter) ? null : value.quarter; + this.yearEditor.setValue(value.year); + this.quarterEditor.setValue(quarter); + this.setTitle(this._getStaticTitle(value)); + break; } - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, + } - getKey: function () { - return this.yearEditor.getValue() + "-" + this.quarterEditor.getValue(); - }, + getKey() { + return `${this.yearEditor.getValue()}-${this.quarterEditor.getValue()}`; + } - isStateValid: function () { + isStateValid() { return this.yearEditor.isValid() && this.quarterEditor.isValid(); } -}); -BI.DynamicYearQuarterTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DynamicYearQuarterTrigger.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicYearQuarterTrigger.EVENT_START = "EVENT_START"; -BI.DynamicYearQuarterTrigger.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicYearQuarterTrigger.EVENT_STOP = "EVENT_STOP"; -BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.DynamicYearQuarterTrigger.EVENT_VALID = "EVENT_VALID"; -BI.shortcut("bi.dynamic_year_quarter_trigger", BI.DynamicYearQuarterTrigger); +} diff --git a/src/widget/yearquarterinterval/yearquarterinterval.js b/src/widget/yearquarterinterval/yearquarterinterval.js index 02a0c67d7..16fa9f4a5 100644 --- a/src/widget/yearquarterinterval/yearquarterinterval.js +++ b/src/widget/yearquarterinterval/yearquarterinterval.js @@ -1,193 +1,248 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2021/1/25 - */ -BI.YearQuarterInterval = BI.inherit(BI.Single, { - constants: { +import { + shortcut, + HorizontalFillLayout, + createWidget, + i18nText, + print, + parseDateTime, + checkDateVoid, + isNotNull, + checkDateLegal +} from "@/core"; +import { Single, Label, Bubbles } from "@/base"; +import { DynamicYearQuarterCombo } from "../yearquarter"; + +@shortcut() +export class YearQuarterInterval extends Single { + static xtype = "bi.year_quarter_interval"; + + constants = { height: 24, width: 25, lgap: 15, offset: -15, - timeErrorCls: "time-error" - }, - - props: { + timeErrorCls: "time-error", + }; + props = { extraCls: "bi-year-quarter-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_quarter_combo", + _createCombo(v, watermark) { + const o = this.options; + const combo = createWidget({ + type: DynamicYearQuarterCombo.xtype, supportDynamic: o.supportDynamic, minDate: o.minDate, maxDate: o.maxDate, behaviors: o.behaviors, value: v, height: o.height, - watermark: watermark, - listeners: [{ - eventName: BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.YearQuarterInterval.EVENT_BEFORE_POPUPVIEW); + watermark, + listeners: [ + { + eventName: DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW, + action: () => { + this.fireEvent( + YearQuarterInterval.EVENT_BEFORE_POPUPVIEW + ); + }, } - }] + ], }); - combo.on(BI.DynamicYearQuarterCombo.EVENT_ERROR, function () { - self._clearTitle(); - BI.Bubbles.hide("error"); - self.element.removeClass(self.constants.timeErrorCls); - self.fireEvent(BI.YearQuarterInterval.EVENT_ERROR); + combo.on(DynamicYearQuarterCombo.EVENT_ERROR, () => { + this._clearTitle(); + Bubbles.hide("error"); + this.element.removeClass(this.constants.timeErrorCls); + this.fireEvent(YearQuarterInterval.EVENT_ERROR); }); - combo.on(BI.DynamicYearQuarterCombo.EVENT_VALID, function () { - self._checkValid(); + combo.on(DynamicYearQuarterCombo.EVENT_VALID, () => { + this._checkValid(); }); - combo.on(BI.DynamicYearQuarterCombo.EVENT_FOCUS, function () { - self._checkValid(); + combo.on(DynamicYearQuarterCombo.EVENT_FOCUS, () => { + this._checkValid(); }); - combo.on(BI.DynamicYearQuarterCombo.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.YearQuarterInterval.EVENT_ERROR); - }else{ - self._clearTitle(); - self.element.removeClass(self.constants.timeErrorCls); - self.fireEvent(BI.YearQuarterInterval.EVENT_CHANGE); + combo.on(DynamicYearQuarterCombo.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(YearQuarterInterval.EVENT_ERROR); + } else { + this._clearTitle(); + this.element.removeClass(this.constants.timeErrorCls); + this.fireEvent(YearQuarterInterval.EVENT_CHANGE); } }); + return combo; - }, - - - _dateCheck: function (date) { - return BI.print(BI.parseDateTime(date, "%Y-%Q"), "%Y-%Q") === date || BI.print(BI.parseDateTime(date, "%Y-%q"), "%Y-%q") === date; - }, + } + _dateCheck(date) { + return ( + print(parseDateTime(date, "%Y-%Q"), "%Y-%Q") === date || + print(parseDateTime(date, "%Y-%q"), "%Y-%q") === date + ); + } - // 判是否在最大最小之间 - _checkVoid: function (obj) { - var o = this.options; - return !BI.checkDateVoid(obj.year, (obj.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0]; - }, + _checkVoid(obj) { + const o = this.options; + + return !checkDateVoid( + obj.year, + (obj.quarter - 1) * 3 + 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)) { - smallDate4Check = (smallObj[0] || "") + "-" + (smallObj[1] || 1); + let smallDate4Check = ""; + if (isNotNull(smallObj)) { + smallDate4Check = `${smallObj[0] || ""}-${smallObj[1] || 1}`; } - var bigDate4Check = ""; - if (BI.isNotNull(bigObj)) { - bigDate4Check = (bigObj[0] || "") + "-" + (bigObj[1] || 1); + let bigDate4Check = ""; + if (isNotNull(bigObj)) { + bigDate4Check = `${bigObj[0] || ""}-${bigObj[1] || 1}`; } - return this._dateCheck(smallDate4Check) && BI.checkDateLegal(smallDate4Check) && this._checkVoid({ - year: smallObj[0], - quarter: smallObj[1] || 1 - }) && this._dateCheck(bigDate4Check) && BI.checkDateLegal(bigDate4Check) && this._checkVoid({ - year: bigObj[0], - quarter: bigObj[1] || 1 - }); - }, - - _compare: function (smallDate, bigDate) { - smallDate = BI.print(BI.parseDateTime(smallDate, "%Y-%Q"), "%Y-%Q"); - bigDate = BI.print(BI.parseDateTime(bigDate, "%Y-%Q"), "%Y-%Q"); - return BI.isNotNull(smallDate) && BI.isNotNull(bigDate) && smallDate > bigDate; - }, - _setTitle: function (v) { + return ( + this._dateCheck(smallDate4Check) && + checkDateLegal(smallDate4Check) && + this._checkVoid({ + year: smallObj[0], + quarter: smallObj[1] || 1, + }) && + this._dateCheck(bigDate4Check) && + checkDateLegal(bigDate4Check) && + this._checkVoid({ + year: bigObj[0], + quarter: bigObj[1] || 1, + }) + ); + } + + _compare(smallDate, bigDate) { + smallDate = print(parseDateTime(smallDate, "%Y-%Q"), "%Y-%Q"); + bigDate = print(parseDateTime(bigDate, "%Y-%Q"), "%Y-%Q"); + + 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.YearQuarterInterval.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(YearQuarterInterval.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.YearQuarterInterval.EVENT_VALID = "EVENT_VALID"; -BI.YearQuarterInterval.EVENT_ERROR = "EVENT_ERROR"; -BI.YearQuarterInterval.EVENT_CHANGE = "EVENT_CHANGE"; -BI.YearQuarterInterval.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.year_quarter_interval", BI.YearQuarterInterval); + + getValue() { + return { start: this.left.getValue(), end: this.right.getValue() }; + } +} From 137d8b14315d2fa61a52260f55ef7d4d89a35bd6 Mon Sep 17 00:00:00 2001 From: Treecat Date: Fri, 13 Jan 2023 17:31:34 +0800 Subject: [PATCH 5/6] =?UTF-8?q?KERNEL-14076=20feat:=20=E5=BE=AA=E7=8E=AF?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=E4=BF=AE=E5=A4=8D=20&&=20=E6=97=A0jira=20?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2=20case=20=E5=85=A8=E9=83=A8=20xtype?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 195 +-- es6.xtype.js | 59 +- src/case/button/icon/icon.change.js | 18 +- src/case/button/icon/icon.trigger.js | 8 +- .../button/icon/iconhalf/icon.half.image.js | 10 +- src/case/button/icon/iconhalf/icon.half.js | 24 +- src/case/button/index.js | 59 +- src/case/button/item.multiselect.js | 59 +- src/case/button/item.singleselect.icontext.js | 8 +- src/case/button/item.singleselect.js | 11 +- src/case/button/item.singleselect.radio.js | 66 +- src/case/button/node/node.arrow.js | 53 +- src/case/button/node/node.first.plus.js | 45 +- src/case/button/node/node.icon.arrow.js | 56 +- src/case/button/node/node.last.plus.js | 43 +- src/case/button/node/node.mid.plus.js | 46 +- .../button/node/node.multilayer.icon.arrow.js | 13 +- src/case/button/node/node.plus.js | 54 +- src/case/button/node/siwtcher.tree.node.js | 24 +- src/case/button/node/treenode.js | 7 +- src/case/button/switch.js | 25 +- .../button/treeitem/item.icon.treeleaf.js | 56 +- .../treeitem/item.multilayer.icon.treeleaf.js | 32 +- src/case/button/treeitem/treeitem.js | 57 +- src/case/calendar/calendar.date.item.js | 50 +- src/case/calendar/calendar.js | 197 ++- src/case/calendar/calendar.year.js | 154 +- src/case/calendar/index.js | 6 +- src/case/checkbox/check.arrownode.js | 5 +- src/case/checkbox/check.checkingmarknode.js | 5 +- src/case/checkbox/check.first.treenode.js | 10 +- src/case/checkbox/check.last.treenode.js | 10 +- src/case/checkbox/check.mid.treenode.js | 10 +- src/case/checkbox/check.treenode.js | 12 +- src/case/colorchooser/colorchooser.custom.js | 57 +- src/case/colorchooser/colorchooser.js | 74 +- .../colorchooser/colorchooser.popup.hex.js | 428 +++--- .../colorchooser.popup.hex.simple.js | 28 +- src/case/colorchooser/colorchooser.popup.js | 191 ++- src/case/colorchooser/colorchooser.simple.js | 5 +- src/case/colorchooser/colorchooser.trigger.js | 64 +- .../colorchooser/colorchooser.trigger.long.js | 89 +- .../colorpicker/button/button.colorpicker.js | 26 +- .../colorpicker/button/button.colorshow.js | 17 +- .../colorchooser/colorpicker/button/index.js | 4 +- .../colorpicker/colorpicker.hex.js | 28 +- .../colorchooser/colorpicker/colorpicker.js | 351 +++-- .../colorpicker/editor.colorpicker.hex.js | 125 +- .../editor.colorpicker.hex.simple.js | 108 +- .../colorpicker/editor.colorpicker.js | 125 +- .../colorpicker/editor.colorpicker.simple.js | 72 +- src/case/colorchooser/colorpicker/index.js | 14 +- .../colorchooser/farbtastic/farbtastic.js | 164 ++- src/case/colorchooser/index.js | 22 +- src/case/combo/bubblecombo/combo.bubble.js | 18 +- src/case/combo/bubblecombo/popup.bubble.js | 6 +- .../combo.editiconcheck.js | 15 +- src/case/combo/iconcombo/combo.icon.js | 16 +- src/case/combo/iconcombo/popup.iconcombo.js | 10 +- src/case/combo/iconcombo/trigger.iconcombo.js | 15 +- .../icontextvaluecombo/combo.icontextvalue.js | 20 +- .../icontextvaluecombo/popup.icontextvalue.js | 12 +- .../combo.searchtextvalue.js | 46 +- .../popup.searchtextvalue.js | 45 +- .../trigger.searchtextvalue.js | 49 +- .../combo.textvaluecheck.js | 28 +- .../popup.textvaluecheck.js | 32 +- .../combo/textvaluecombo/combo.textvalue.js | 62 +- .../textvaluecombo/combo.textvaluesmall.js | 21 +- .../combo/textvaluecombo/popup.textvalue.js | 61 +- src/case/editor/editor.clear.js | 85 +- src/case/editor/editor.defaulttext.js | 88 +- src/case/editor/editor.shelter.js | 153 +- src/case/editor/editor.sign.js | 109 +- src/case/editor/editor.state.js | 168 ++- src/case/editor/editor.state.simple.js | 83 +- src/case/layer/index.js | 8 +- src/case/layer/layer.multipopup.js | 27 +- src/case/layer/layer.panel.js | 44 +- src/case/layer/pane.list.js | 60 +- src/case/layer/panel.js | 40 +- .../linearsegment/button.linear.segment.js | 78 +- src/case/linearsegment/index.js | 4 +- src/case/linearsegment/linear.segment.js | 78 +- src/case/list/list.select.js | 35 +- src/case/loader/loader.lazy.js | 10 +- src/case/loader/loader.list.js | 110 +- src/case/loader/sort.list.js | 34 +- src/case/pager/index.js | 6 +- src/case/pager/pager.all.count.js | 159 +- src/case/pager/pager.detail.js | 158 +- src/case/pager/pager.direction.js | 121 +- src/case/segment/button.segment.js | 8 +- src/case/segment/segment.js | 53 +- src/case/toolbar/toolbar.multiselect.js | 47 +- src/case/tree/tree.level.js | 50 +- .../tree/treeexpander/tree.expander.popup.js | 17 +- src/case/trigger/trigger.editor.js | 20 +- src/case/trigger/trigger.icon.js | 5 +- src/case/trigger/trigger.icon.text.js | 57 +- src/case/trigger/trigger.icon.text.select.js | 7 +- src/case/trigger/trigger.text.js | 91 +- src/case/trigger/trigger.text.select.js | 24 +- src/case/trigger/trigger.text.select.small.js | 5 +- src/case/trigger/trigger.text.small.js | 32 +- src/case/ztree/asynctree.js | 22 +- src/case/ztree/jquery.ztree.core-3.5.js | 541 ++++--- src/case/ztree/jquery.ztree.excheck-3.5.js | 1312 +++++++++-------- src/case/ztree/list/listasynctree.js | 12 +- src/case/ztree/list/listparttree.js | 21 +- src/case/ztree/list/listtreeview.js | 6 +- src/case/ztree/parttree.js | 60 +- src/case/ztree/tree.display.js | 10 +- src/case/ztree/tree.list.display.js | 9 +- src/case/ztree/tree.simple.js | 32 +- src/case/ztree/treerender.page.service.js | 6 +- src/case/ztree/treerender.scroll.service.js | 16 +- src/case/ztree/treeview.js | 75 +- 118 files changed, 4624 insertions(+), 3507 deletions(-) diff --git a/es6.js b/es6.js index afc7ff8e1..357bb92cc 100644 --- a/es6.js +++ b/es6.js @@ -3,7 +3,8 @@ const path = require("path"); const prettier = require("prettier"); const { exec } = require("child_process"); const { search, initDepts, depts } = require("./es6.xtype"); -const _ = require("lodash"); +const lodash = require("lodash"); +const DEPTS = depts; // const XTYPE_ONLY = false; // const THIS_REPLACE = false; @@ -32,10 +33,11 @@ function parserImport(code) { while (regResult) { importMap[regResult[2]] = regResult[1] .split(",") - .map(el => el.trim()).filter(el => el); + .map(el => el.trim()) + .filter(el => el); regResult = reg.exec(code); } - + return importMap; } @@ -46,7 +48,7 @@ async function saveAndFixCode(path, code) { } const prettierCode = prettier.format(_code, { tabWidth: 4, - parser: 'babel', + parser: "babel", printWidth: 120, }); fs.writeFileSync(path, prettierCode); @@ -58,56 +60,18 @@ async function saveAndFixCode(path, code) { }); } -const target = [ - "isNull", - "toPix", - "isKey", - "isObject", - "map", - "extend", - "isFunction", - "isEmptyArray", - "isArray", - "Controller", - "createWidget", - "Events", - "emptyFn", - "nextTick", - "bind", - "i18nText", - "isNotNull", - "isString", - "isNumber", - "isEmpty", - "isEmptyString", - "any", - "deepContains", - "isNotEmptyString", - "each", - "contains", - "remove", - "createItems", - "makeArrayByArray", - "VerticalAlign", - "pushDistinct", - "endWith", - "transformItems", - "print", - "Tree", - "Func", - "Selection", -]; +// const target = []; // 加载模块 const loader = { // G: { "@/core": { shortcut: true } }, load(srcName, module) { const G = loader.G; - if (target.indexOf(module) >= 0) { - G["@/core"][module] = true; + // if (target.indexOf(module) >= 0) { + // G["@/core"][module] = true; - return true; - } + // return true; + // } if (module.startsWith('"bi.')) { const key = search(srcName, module); if (key) { @@ -136,15 +100,15 @@ const loader = { async function handleFile(srcName) { await saveAndFixCode(srcName); // 全局状态回归 - let G = loader.G = { }; - + let G = (loader.G = {}); + const sourceCode = fs.readFileSync(srcName).toString(); const result = /BI\.(.*?)\s=\sBI\.inherit\(/.exec(sourceCode); if (!result) { // console.log(`已经es6过，替换 xtype => ${srcName}`); if (!/export class/.test(sourceCode)) { - console.log("忽略文件", srcName); + // console.log("忽略文件", srcName); return; } @@ -165,9 +129,9 @@ async function handleFile(srcName) { }); // 识别 import const importMap = parserImport(noXtypeCode); - + // 合并原来的 import 到 G - _.forEach(importMap, (depts, module) => { + lodash.forEach(importMap, (depts, module) => { depts.forEach(dept => { if (!G[module]) { G[module] = {}; @@ -176,56 +140,110 @@ async function handleFile(srcName) { G[module][dept] = true; }); }); + - // 合并 core - const crossPackages = fs.readdirSync("src"); - _.forEach(G, (depts, module) => { + // 合并包 + const crossPackages = fs.readdirSync("src").map(el => `@/${el}`); + lodash.forEach(G, (depts, module) => { crossPackages.forEach(crosspackage => { - if (module.indexOf(crosspackage) >= 0) { - if (!G[`@/${crosspackage}`]) { - G[`@/${crosspackage}`] = {}; + if (module.indexOf(crosspackage.replace(/^@\//, "")) >= 0) { + if (!G[crosspackage]) { + G[crosspackage] = {}; } - Object.assign(G[`@/${crosspackage}`], depts); + Object.assign(G[crosspackage], depts); } }); }); - const tmpG = {}; - _.forEach(G, (depts, module) => { - const flag = _.some(crossPackages, crosspackage => module.indexOf(crosspackage) >= 0 && !module.startsWith("@")); + lodash.forEach(G, (depts, module) => { + const flag = lodash.some( + crossPackages, + crosspackage => + module.indexOf(crosspackage) >= 0 && !module.startsWith("@"), + ); if (!flag) { tmpG[module] = depts; } }); + + let circle = false; + // 处理循环依赖 + const forbiddenCrossRules = { + base: ["@/case", "@/base", "@/widget"], + "case": ["@/case", "@/widget"], + widget: ["@/widget"], + }; + + const forbiddenKeys = []; + const circleG = {}; + + lodash.forEach(G, (depts, module) => { + // 找出 rule + const packages = Object.keys(forbiddenCrossRules); + let key = packages.filter( + _package => srcName.indexOf(_package) >= 0, + ); + if (key.length !== 1) { + throw new Error( + "理论不可能出现这个问题，需要 treecat 优化下找包逻辑1", + ); + } + key = key[0]; + const rule = forbiddenCrossRules[key]; + + if (lodash.includes(rule, module)) { + circle = true; + + const deptsArr = Object.keys(depts); + if (deptsArr.filter(dept => !DEPTS[dept]).length > 0) { + throw new Error( + "理论不可能出现这个问题，需要 treecat 优化下找包逻辑2", + ); + } + deptsArr + .filter(dept => DEPTS[dept]) + .forEach(dept => { + const value = `@${DEPTS[dept].replace(path.resolve("src"), "").replace(/\\/g, "/").replace(/\.js$/, "")}`; + if (!tmpG[value]) { + tmpG[value] = {}; + } + tmpG[value][dept] = true; + }); + forbiddenKeys.push(module); + } + }); + Object.assign(tmpG, circleG); + forbiddenKeys.forEach(key => { + delete tmpG[key]; + }); // 较验手工 import 错误 const map = {}; let conflict = false; - let circle = false; - _.forEach(tmpG, (imports, fromStr) => { - if (srcName.indexOf("base") >= 0) { - if (fromStr === "@/case" || fromStr === "@/base") { - circle = true; - } - } - _.forEach(imports, (bools, _import) => { - if (map[_import] && map[_import] !== fromStr) { + lodash.forEach(tmpG, (depts, module) => { + lodash.forEach(depts, (_, _import) => { + if (map[_import] && map[_import] !== module) { conflict = true; } - - map[_import] = fromStr; + + map[_import] = module; }); }); conflict && ConflictImport.push(srcName); circle && CircularDependency.push(srcName); + + G = tmpG; - - const noImportCode = noXtypeCode.replace(/import {([\s\S]*?)} from "(.*?)";/g, ""); - + + const noImportCode = noXtypeCode.replace( + /import {([\s\S]*?)} from "(.*?)";/g, + "", + ); + let I = ""; Object.keys(G).forEach(key => { let moduleKey = key; @@ -236,14 +254,13 @@ async function handleFile(srcName) { Object.keys(G[moduleKey]).forEach(key => { i += `${key}, `; }); - + // 必须以 . 开头 const moduleInValid = /^[^@.]/.test(moduleKey); if (moduleInValid) { moduleKey = `./${moduleKey}`; } - - + I += `import {${i}} from '${moduleKey}'\n`; }); const code = `${I}\n${noImportCode}`; @@ -255,17 +272,16 @@ async function handleFile(srcName) { G["@/core"] = { shortcut: true }; - const clzName = result[1]; if (!clzName) { console.log(`${srcName} 不需要 es6 化`); - + return; } const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1]; - + // const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1]; const collection = { @@ -463,19 +479,6 @@ async function traverse(srcName) { const srcName = process.argv[2]; initDepts().then(async () => { - const content = fs.readFileSync("src/core/2.base.js").toString(); - - let result = content.match(/export function (.*?)\(/g); - target.push( - ...result.map(el => - el.replace("export function ", "").replace("(", ""), - ), - ); - result = content.match(/export const (.*?) =/g); - target.push( - ...result.map(el => el.replace("export const ", "").replace(" =", "")), - ); - await traverse(srcName); // 对数据处理 @@ -483,6 +486,6 @@ initDepts().then(async () => { console.log(`导入冲突 ${el}`); }); CircularDependency.forEach(el => { - console.log(`出现循环依赖 ${el}`); + console.log(`出现循环依赖(已经fixed) ${el}`); }); }); diff --git a/es6.xtype.js b/es6.xtype.js index 351134bf3..db1babcbb 100644 --- a/es6.xtype.js +++ b/es6.xtype.js @@ -1,35 +1,49 @@ const fs = require("fs"); const path = require("path"); +const lodash = require("lodash"); const depts = {}; async function handle(filename) { - // 找clzName - const code = fs.readFileSync(filename); + if (path.extname(filename) !== ".js") { + return; + } + const code = fs.readFileSync(filename).toString(); + const inheritRegResult = /BI\.(.*?)\s=\sBI\.inherit\(/.exec(code); - let clzName; if (inheritRegResult) { - clzName = inheritRegResult[1]; + const clzName = inheritRegResult[1]; + depts[clzName] = filename; } else { - const clzRegResult = /export\s+class\s+(.*?)\s+/.exec(code); - - if (clzRegResult) { - clzName = clzRegResult[1]; - } else { - return; - } - const xtypeResult = /static xtype = (.*?)(;|\s)/.exec(code); - // 找一下 xtype - if (xtypeResult) { - depts[xtypeResult[1]] = { - clzName, + // 一个文件夹里面可能有多个 xtype + const reg = /export\s+class\s+(.*?)([\s|{])([\w\W]*?)static xtype\s?=\s?((["|'])(.*?)(\5))/g; + Array.from(code.matchAll(reg)).forEach(res => { + const xtype = res[4]; + depts[xtype] = { + clzName: res[1], clzPath: filename, }; - } else { - // console.log(`${filename} 没有 xtype`); + }); + // 同时找一下 export + if (path.basename(filename) !== "index.js") { + const regs = [ + /export function (.*?)\(/g, + /export const (.*?) =/g, + /export class (.*?) /g, + /export \{([\w\W]*?)\}/g, + ]; + regs.forEach((reg, index) => { + Array.from(code.matchAll(reg)).forEach(el => { + depts[el[1]] = filename; + if (index === 3) { + el[1].split(",").map(el => el.trim()).forEach(key => { + depts[key] = filename; + }); + } + }); + }); } } - depts[clzName] = filename; } function isExist(filePath) { @@ -53,6 +67,13 @@ async function bfs(filename) { async function initDepts() { // dfs 构建依赖关系 await bfs(path.resolve("src")); + const m = {}; + lodash.forEach(depts, value => { + if (typeof value === "object") { + m[value.clzName] = value.clzPath; + } + }); + Object.assign(depts, m); } diff --git a/src/case/button/icon/icon.change.js b/src/case/button/icon/icon.change.js index 16ebd501d..b56d7c696 100644 --- a/src/case/button/icon/icon.change.js +++ b/src/case/button/icon/icon.change.js @@ -1,6 +1,5 @@ -import { Single } from "../../../base/single/0.single"; -import { IconButton } from "../../../base/single/button/buttons/button.icon"; -import { shortcut, extend, emptyFn, isFunction, createWidget, Controller } from "../../../core"; +import { IconButton, Single } from "@/base"; +import { shortcut, extend, emptyFn, isFunction, createWidget, Controller } from "@/core"; /** * 可以改变图标的button @@ -15,10 +14,9 @@ export class IconChangeButton extends Single { static xtype = "bi.icon_change_button"; static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-icon-change-button", iconCls: "", @@ -42,12 +40,14 @@ export class IconChangeButton extends Single { _init() { const o = this.options; - o.iconCls = isFunction(o.iconCls) ? this.__watch(o.iconCls, (context, newValue) => { - this.setIcon(newValue); - }) : o.iconCls; + o.iconCls = isFunction(o.iconCls) + ? this.__watch(o.iconCls, (context, newValue) => { + this.setIcon(newValue); + }) + : o.iconCls; super._init(...arguments); this.button = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, element: this, cls: o.iconCls, height: o.height, diff --git a/src/case/button/icon/icon.trigger.js b/src/case/button/icon/icon.trigger.js index a7606d59b..b22c54cec 100644 --- a/src/case/button/icon/icon.trigger.js +++ b/src/case/button/icon/icon.trigger.js @@ -1,5 +1,5 @@ -import { IconButton } from "../../../base/single/button/buttons/button.icon"; -import { shortcut, extend } from "../../../core"; +import { IconButton } from "@/base"; +import { shortcut, extend } from "@/core"; /** * 统一的trigger图标按钮 @@ -12,10 +12,10 @@ import { shortcut, extend } from "../../../core"; export class TriggerIconButton extends IconButton { static xtype = "bi.trigger_icon_button"; static EVENT_CHANGE = IconButton.EVENT_CHANGE; - + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-trigger-icon-button overflow-hidden`, extraCls: "pull-down-font", diff --git a/src/case/button/icon/iconhalf/icon.half.image.js b/src/case/button/icon/iconhalf/icon.half.image.js index 24d2d0cea..ca51f65f4 100644 --- a/src/case/button/icon/iconhalf/icon.half.image.js +++ b/src/case/button/icon/iconhalf/icon.half.image.js @@ -1,6 +1,5 @@ -import { IconButton } from "../../../../base/single/button/buttons/button.icon"; -import { shortcut, extend } from "../../../../core"; - +import { IconButton } from "@/base"; +import { shortcut, extend } from "@/core"; /** * guy @@ -10,11 +9,11 @@ import { shortcut, extend } from "../../../../core"; @shortcut() export class HalfIconButton extends IconButton { static xtype = "bi.half_icon_button"; - static EVENT_CHANGE = IconButton.EVENT_CHANGE + static EVENT_CHANGE = IconButton.EVENT_CHANGE; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { extraCls: "bi-half-icon-button check-half-select-icon", height: 16, @@ -25,4 +24,3 @@ export class HalfIconButton extends IconButton { }); } } - diff --git a/src/case/button/icon/iconhalf/icon.half.js b/src/case/button/icon/iconhalf/icon.half.js index a0db816ed..0e84aedae 100644 --- a/src/case/button/icon/iconhalf/icon.half.js +++ b/src/case/button/icon/iconhalf/icon.half.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../../../base/single/button/button.basic"; -import { shortcut, extend } from "../../../../core"; +import { CenterAdaptLayout, DefaultLayout, shortcut, extend } from "@/core"; +import { BasicButton } from "@/base"; /** * guy @@ -13,7 +13,7 @@ export class HalfButton extends BasicButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { selected: false, width: 14, @@ -25,15 +25,17 @@ export class HalfButton extends BasicButton { render() { const o = this.options; - + return { - type: "bi.center_adapt", - items: [{ - type: "bi.default", - cls: "bi-half-button bi-high-light-border", - width: o.iconWidth, - height: o.iconHeight, - }], + type: CenterAdaptLayout.xtype, + items: [ + { + type: DefaultLayout.xtype, + cls: "bi-half-button bi-high-light-border", + width: o.iconWidth, + height: o.iconHeight, + }, + ], }; } diff --git a/src/case/button/index.js b/src/case/button/index.js index 8f366680c..6f4a1b209 100644 --- a/src/case/button/index.js +++ b/src/case/button/index.js @@ -1,28 +1,31 @@ -export { MultiSelectItem } from "./item.multiselect"; -export { SingleSelectIconTextItem } from "./item.singleselect.icontext"; -export { SingleSelectItem } from "./item.singleselect"; -export { SingleSelectRadioItem } from "./item.singleselect.radio"; -export { Switch } from "./switch"; - -export { IconChangeButton } from "./icon/icon.change"; -export { TriggerIconButton } from "./icon/icon.trigger"; -export { HalfIconButton } from "./icon/iconhalf/icon.half.image"; -export { HalfButton } from "./icon/iconhalf/icon.half"; - -export { ArrowNode } from "./node/node.arrow"; -export { FirstPlusGroupNode } from "./node/node.first.plus"; -export { IconArrowNode } from "./node/node.icon.arrow"; -export { LastPlusGroupNode } from "./node/node.last.plus"; -export { MidPlusGroupNode } from "./node/node.mid.plus"; -export { MultiLayerIconArrowNode } from "./node/node.multilayer.icon.arrow"; -export { PlusGroupNode } from "./node/node.plus"; -export { TreeNodeSwitcher } from "./node/siwtcher.tree.node"; -export { BasicTreeNode } from "./node/treenode"; - -export { IconTreeLeafItem } from "./treeitem/item.icon.treeleaf"; -export { MultiLayerIconTreeLeafItem } from "./treeitem/item.multilayer.icon.treeleaf"; - - -export { - BasicTreeItem, FirstTreeLeafItem, MidTreeLeafItem, LastTreeLeafItem, RootTreeLeafItem -} from "./treeitem/treeitem"; +export { MultiSelectItem } from "./item.multiselect"; +export { SingleSelectIconTextItem } from "./item.singleselect.icontext"; +export { SingleSelectItem } from "./item.singleselect"; +export { SingleSelectRadioItem } from "./item.singleselect.radio"; +export { Switch } from "./switch"; + +export { IconChangeButton } from "./icon/icon.change"; +export { TriggerIconButton } from "./icon/icon.trigger"; +export { HalfIconButton } from "./icon/iconhalf/icon.half.image"; +export { HalfButton } from "./icon/iconhalf/icon.half"; + +export { ArrowNode } from "./node/node.arrow"; +export { FirstPlusGroupNode } from "./node/node.first.plus"; +export { IconArrowNode } from "./node/node.icon.arrow"; +export { LastPlusGroupNode } from "./node/node.last.plus"; +export { MidPlusGroupNode } from "./node/node.mid.plus"; +export { MultiLayerIconArrowNode } from "./node/node.multilayer.icon.arrow"; +export { PlusGroupNode } from "./node/node.plus"; +export { TreeNodeSwitcher } from "./node/siwtcher.tree.node"; +export { BasicTreeNode } from "./node/treenode"; + +export { IconTreeLeafItem } from "./treeitem/item.icon.treeleaf"; +export { MultiLayerIconTreeLeafItem } from "./treeitem/item.multilayer.icon.treeleaf"; + +export { + BasicTreeItem, + FirstTreeLeafItem, + MidTreeLeafItem, + LastTreeLeafItem, + RootTreeLeafItem +} from "./treeitem/treeitem"; diff --git a/src/case/button/item.multiselect.js b/src/case/button/item.multiselect.js index bd82f2dcc..d39bb97fc 100644 --- a/src/case/button/item.multiselect.js +++ b/src/case/button/item.multiselect.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut, extend, createWidget } from "../../core"; +import { Checkbox, Label, BasicButton } from "@/base"; +import { VerticalAdaptLayout, CenterAdaptLayout, shortcut, extend, createWidget } from "@/core"; /** * guy @@ -10,7 +10,6 @@ import { shortcut, extend, createWidget } from "../../core"; export class MultiSelectItem extends BasicButton { static xtype = "bi.multi_select_item"; static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -26,36 +25,39 @@ export class MultiSelectItem extends BasicButton { render() { const o = this.options; this.checkbox = createWidget({ - type: "bi.checkbox", + type: Checkbox.xtype, }); - + return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [{ - type: "bi.center_adapt", - items: [this.checkbox], - }, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + { + type: CenterAdaptLayout.xtype, + items: [this.checkbox], + }, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + cls: "list-item-text", + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.textHgap, + rgap: o.textRgap, + lgap: o.textLgap, + vgap: o.textVgap, + text: o.text, + keyword: o.keyword, + value: o.value, + py: o.py, }, - cls: "list-item-text", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.textHgap, - rgap: o.textRgap, - lgap: o.textLgap, - vgap: o.textVgap, - text: o.text, - keyword: o.keyword, - value: o.value, - py: o.py, }, - }], + ], }; } @@ -88,4 +90,3 @@ export class MultiSelectItem extends BasicButton { this.checkbox.setSelected(v); } } - diff --git a/src/case/button/item.singleselect.icontext.js b/src/case/button/item.singleselect.icontext.js index 58e329ff4..c55de1e17 100644 --- a/src/case/button/item.singleselect.icontext.js +++ b/src/case/button/item.singleselect.icontext.js @@ -1,5 +1,5 @@ -import { Single } from "../../base/single/0.single"; -import { shortcut, extend, createWidget, Controller } from "../../core"; +import { IconTextItem, Single } from "@/base"; +import { shortcut, extend, createWidget, Controller } from "@/core"; /** * Created by GUY on 2016/2/2. @@ -25,7 +25,7 @@ export class SingleSelectIconTextItem extends Single { render() { const o = this.options; this.text = createWidget({ - type: "bi.icon_text_item", + type: IconTextItem.xtype, element: this, cls: o.iconCls, once: o.once, @@ -73,5 +73,3 @@ export class SingleSelectIconTextItem extends Single { this.text.unRedMark(...arguments); } } - - diff --git a/src/case/button/item.singleselect.js b/src/case/button/item.singleselect.js index a3fd34b01..9a66ef5f3 100644 --- a/src/case/button/item.singleselect.js +++ b/src/case/button/item.singleselect.js @@ -1,6 +1,6 @@ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut, extend, createWidget } from "../../core"; - +import { Label, BasicButton } from "@/base"; +import { shortcut, extend, createWidget } from "@/core"; + @shortcut() export class SingleSelectItem extends BasicButton { static xtype = "bi.single_select_item"; @@ -21,7 +21,7 @@ export class SingleSelectItem extends BasicButton { render() { const o = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, element: this, textAlign: o.textAlign, whiteSpace: "nowrap", @@ -66,6 +66,3 @@ export class SingleSelectItem extends BasicButton { super.setSelected(...arguments); } } - - - diff --git a/src/case/button/item.singleselect.radio.js b/src/case/button/item.singleselect.radio.js index 0fd83a4b6..cdee75636 100644 --- a/src/case/button/item.singleselect.radio.js +++ b/src/case/button/item.singleselect.radio.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut, extend } from "../../core"; +import { VerticalAdaptLayout, CenterAdaptLayout, shortcut, extend } from "@/core"; +import { Radio, Label, BasicButton } from "@/base"; /** * guy @@ -27,37 +27,42 @@ export class SingleSelectRadioItem extends BasicButton { const o = this.options; return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [{ - type: "bi.center_adapt", - items: [{ - type: "bi.radio", - ref: _ref => { - this.radio = _ref; - }, - }], - }, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + { + type: CenterAdaptLayout.xtype, + items: [ + { + type: Radio.xtype, + ref: (_ref) => { + this.radio = _ref; + }, + }, + ], + }, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + cls: "list-item-text", + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.hgap || o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + keyword: o.keyword, + value: o.value, + py: o.py, }, - cls: "list-item-text", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap || o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - keyword: o.keyword, - value: o.value, - py: o.py, }, - }], + ], }; } @@ -90,4 +95,3 @@ export class SingleSelectRadioItem extends BasicButton { this.radio.setSelected(v); } } - diff --git a/src/case/button/node/node.arrow.js b/src/case/button/node/node.arrow.js index dc1834c88..7d1d0118b 100644 --- a/src/case/button/node/node.arrow.js +++ b/src/case/button/node/node.arrow.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget } from "../../../core"; +import { ArrowTreeGroupNodeCheckbox } from "../../checkbox"; +import { VerticalAdaptLayout, shortcut, extend, createWidget } from "@/core"; +import { Label, NodeButton } from "@/base"; /** * Created by roy on 15/10/16. @@ -10,7 +11,7 @@ export class ArrowNode extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-arrow-group-node bi-list-item`, id: "", @@ -24,34 +25,37 @@ export class ArrowNode extends NodeButton { render() { const o = this.options; this.checkbox = createWidget({ - type: "bi.arrow_group_node_checkbox", + type: ArrowTreeGroupNodeCheckbox.xtype, expandIcon: o.expandIcon, collapseIcon: o.collapseIcon, }); - + return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [this.checkbox, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + this.checkbox, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.hgap || o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + value: o.value, + py: o.py, + keyword: o.keyword, }, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap || o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, }, - }], + ], }; } @@ -78,4 +82,3 @@ export class ArrowNode extends NodeButton { this.checkbox.setSelected(v); } } - diff --git a/src/case/button/node/node.first.plus.js b/src/case/button/node/node.first.plus.js index 8e895f801..288b70aea 100644 --- a/src/case/button/node/node.first.plus.js +++ b/src/case/button/node/node.first.plus.js @@ -1,6 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller } from "../../../core"; - +import { FirstTreeNodeCheckbox } from "../../checkbox"; +import { Label, NodeButton } from "@/base"; +import { shortcut, extend, createWidget, Controller } from "@/core"; /** * 加号表示的组节点 @@ -11,10 +11,10 @@ import { shortcut, extend, createWidget, Controller } from "../../../core"; @shortcut() export class FirstPlusGroupNode extends NodeButton { static xtype = "bi.first_plus_group_node"; - + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-first-plus-group-node bi-list-item`, logic: { @@ -31,13 +31,13 @@ export class FirstPlusGroupNode extends NodeButton { super._init.apply(this, arguments); const o = this.options; this.checkbox = createWidget({ - type: "bi.first_tree_node_checkbox", + type: FirstTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, iconWidth: o.height, }); this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -58,15 +58,27 @@ export class FirstPlusGroupNode extends NodeButton { } }); const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, this.text); - BI.createWidget(BI.extend({ - element: this, - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items, - })))); + const items = BI.LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + BI.createWidget( + BI.extend( + { + element: this, + }, + BI.LogicFactory.createLogic( + type, + BI.extend(o.logic, { + items, + }) + ) + ) + ); } doRedMark() { @@ -89,4 +101,3 @@ export class FirstPlusGroupNode extends NodeButton { } } } - diff --git a/src/case/button/node/node.icon.arrow.js b/src/case/button/node/node.icon.arrow.js index 866568b95..575a8c1c0 100644 --- a/src/case/button/node/node.icon.arrow.js +++ b/src/case/button/node/node.icon.arrow.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller, isNotNull } from "../../../core"; +import { ArrowTreeGroupNodeCheckbox } from "../../checkbox"; +import { IconLabel, Label, NodeButton } from "@/base"; +import { shortcut, extend, createWidget, Controller, isNotNull } from "@/core"; /** * Created by User on 2016/3/31. @@ -14,7 +15,7 @@ export class IconArrowNode extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-icon-arrow-node bi-list-item`, logic: { @@ -35,7 +36,7 @@ export class IconArrowNode extends NodeButton { super._init.apply(this, arguments); const o = this.options; this.checkbox = createWidget({ - type: "bi.arrow_group_node_checkbox", + type: ArrowTreeGroupNodeCheckbox.xtype, expandIcon: o.expandIcon, collapseIcon: o.collapseIcon, width: 24, @@ -43,7 +44,7 @@ export class IconArrowNode extends NodeButton { }); const icon = createWidget({ - type: "bi.icon_label", + type: IconLabel.xtype, width: 24, cls: o.iconCls, iconWidth: o.iconWidth, @@ -51,7 +52,7 @@ export class IconArrowNode extends NodeButton { }); createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -62,7 +63,7 @@ export class IconArrowNode extends NodeButton { py: o.py, keyword: o.keyword, }); - this.checkbox.on(Controller.EVENT_CHANGE, type => { + this.checkbox.on(Controller.EVENT_CHANGE, (type) => { if (type === BI.Events.CLICK) { if (this.checkbox.isSelected()) { this.triggerExpand(); @@ -72,22 +73,35 @@ export class IconArrowNode extends NodeButton { } }); const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: o.iconWrapperWidth, - el: this.checkbox, - }, { - width: 16, - el: icon, - }, this.text); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - rgap: 5, - })))); + const items = BI.LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: o.iconWrapperWidth, + el: this.checkbox, + }, + { + width: 16, + el: icon, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + BI.LogicFactory.createLogic( + type, + extend(o.logic, { + items, + rgap: 5, + }) + ) + ) + ); } - doRedMark () { + doRedMark() { this.text.doRedMark(...arguments); } diff --git a/src/case/button/node/node.last.plus.js b/src/case/button/node/node.last.plus.js index 95e745f4e..628197cb0 100644 --- a/src/case/button/node/node.last.plus.js +++ b/src/case/button/node/node.last.plus.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, isNotNull, Controller } from "../../../core"; +import { LastTreeNodeCheckbox } from "../../checkbox"; +import { Label, NodeButton } from "@/base"; +import { shortcut, extend, createWidget, isNotNull, Controller } from "@/core"; /** * 加号表示的组节点 @@ -13,7 +14,7 @@ export class LastPlusGroupNode extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-last-plus-group-node bi-list-item`, logic: { @@ -29,13 +30,13 @@ export class LastPlusGroupNode extends NodeButton { BI.LastPlusGroupNode.superclass._init.apply(this, arguments); const o = this.options; this.checkbox = createWidget({ - type: "bi.last_tree_node_checkbox", + type: LastTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, iconWidth: o.height, }); this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -46,7 +47,7 @@ export class LastPlusGroupNode extends NodeButton { py: o.py, keyword: o.keyword, }); - this.checkbox.on(Controller.EVENT_CHANGE, type => { + this.checkbox.on(Controller.EVENT_CHANGE, (type) => { if (type === BI.Events.CLICK) { if (this.checkbox.isSelected()) { this.triggerExpand(); @@ -56,15 +57,27 @@ export class LastPlusGroupNode extends NodeButton { } }); const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, this.text); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - })))); + const items = BI.LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + BI.LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); } doRedMark() { diff --git a/src/case/button/node/node.mid.plus.js b/src/case/button/node/node.mid.plus.js index e1276d6ab..ba3d38ea2 100644 --- a/src/case/button/node/node.mid.plus.js +++ b/src/case/button/node/node.mid.plus.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller } from "../../../core"; +import { MidTreeNodeCheckbox } from "../../checkbox"; +import { Label, NodeButton } from "@/base"; +import { shortcut, extend, createWidget, Controller } from "@/core"; /** * 加号表示的组节点 @@ -10,10 +11,10 @@ import { shortcut, extend, createWidget, Controller } from "../../../core"; @shortcut export class MidPlusGroupNode extends NodeButton { static xtype = "bi.mid_plus_group_node"; - + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-mid-plus-group-node bi-list-item`, logic: { @@ -30,13 +31,13 @@ export class MidPlusGroupNode extends NodeButton { super._init(...arguments); const o = this.options; this.checkbox = createWidget({ - type: "bi.mid_tree_node_checkbox", + type: MidTreeNodeCheckbox.xtype, stopPropagation: true, iconHeight: o.height, iconWidth: o.height, }); this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -47,7 +48,7 @@ export class MidPlusGroupNode extends NodeButton { py: o.py, keyword: o.keyword, }); - this.checkbox.on(Controller.EVENT_CHANGE, type => { + this.checkbox.on(Controller.EVENT_CHANGE, (type) => { if (type === BI.Events.CLICK) { if (this.checkbox.isSelected()) { this.triggerExpand(); @@ -57,15 +58,27 @@ export class MidPlusGroupNode extends NodeButton { } }); const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, this.text); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - })))); + const items = BI.LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + el: this.checkbox, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + BI.LogicFactory.createLogic( + type, + extend(o.logic, { + items, + }) + ) + ) + ); } doRedMark() { @@ -88,4 +101,3 @@ export class MidPlusGroupNode extends NodeButton { } } } - diff --git a/src/case/button/node/node.multilayer.icon.arrow.js b/src/case/button/node/node.multilayer.icon.arrow.js index 995bc0327..fb4554741 100644 --- a/src/case/button/node/node.multilayer.icon.arrow.js +++ b/src/case/button/node/node.multilayer.icon.arrow.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller, count, makeArray } from "../../../core"; +import { IconArrowNode } from "./node.icon.arrow"; +import { Layout, HorizontalAdaptLayout, shortcut, extend, createWidget, Controller, count, makeArray } from "@/core"; +import { NodeButton } from "@/base"; @shortcut() export class MultiLayerIconArrowNode extends NodeButton { @@ -7,7 +8,7 @@ export class MultiLayerIconArrowNode extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { extraCls: "bi-multilayer-icon-arrow-node bi-list-item", layer: 0, // 第几层级 @@ -25,7 +26,7 @@ export class MultiLayerIconArrowNode extends NodeButton { super._init(...arguments); const o = this.options; this.node = createWidget({ - type: "bi.icon_arrow_node", + type: IconArrowNode.xtype, iconCls: o.iconCls, cls: "bi-list-item-none", id: o.id, @@ -48,14 +49,14 @@ export class MultiLayerIconArrowNode extends NodeButton { const items = []; count(0, o.layer, () => { items.push({ - type: "bi.layout", + type: Layout.xtype, width: 15, height: o.height, }); }); items.push(this.node); createWidget({ - type: "bi.horizontal_adapt", + type: HorizontalAdaptLayout.xtype, element: this, columnSize: makeArray(o.layer, 15), items, diff --git a/src/case/button/node/node.plus.js b/src/case/button/node/node.plus.js index 4a4e1b042..d8c632fce 100644 --- a/src/case/button/node/node.plus.js +++ b/src/case/button/node/node.plus.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller } from "../../../core"; +import { TreeNodeCheckbox } from "../../checkbox"; +import { VerticalAdaptLayout, shortcut, extend, createWidget, Controller } from "@/core"; +import { Label, NodeButton } from "@/base"; /** * 加号表示的组节点 @@ -10,10 +11,10 @@ import { shortcut, extend, createWidget, Controller } from "../../../core"; @shortcut() export class PlusGroupNode extends NodeButton { static xtype = "bi.plus_group_node"; - + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-plus-group-node bi-list-item`, id: "", @@ -26,7 +27,7 @@ export class PlusGroupNode extends NodeButton { render() { const o = this.options; this.checkbox = createWidget({ - type: "bi.tree_node_checkbox", + type: TreeNodeCheckbox.xtype, iconHeight: o.height, iconWidth: o.iconWrapperWidth || o.height, }); @@ -37,30 +38,33 @@ export class PlusGroupNode extends NodeButton { } this.fireEvent(Controller.EVENT_CHANGE, args); }); - + return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [this.checkbox, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + this.checkbox, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.hgap || o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + value: o.value, + keyword: o.keyword, + py: o.py, }, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap || o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, }, - }], + ], }; } diff --git a/src/case/button/node/siwtcher.tree.node.js b/src/case/button/node/siwtcher.tree.node.js index 502deb48f..316340039 100644 --- a/src/case/button/node/siwtcher.tree.node.js +++ b/src/case/button/node/siwtcher.tree.node.js @@ -1,11 +1,11 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend } from "../../../core"; +import { IconLabel, NodeButton } from "@/base"; +import { shortcut, extend } from "@/core"; @shortcut() export class TreeNodeSwitcher extends NodeButton { static xtype = "bi.tree_node_switcher"; static EVENT_CHANGE = "EVENT_CHANGE"; - + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-tree-node-switcher", @@ -21,7 +21,7 @@ export class TreeNodeSwitcher extends NodeButton { const [collapse, expand] = this.getIconCls(); return { - type: "bi.icon_label", + type: IconLabel.xtype, iconWidth: this.options.iconWidth, iconHeight: this.options.iconHeight, cls: this.options.open ? expand : collapse, @@ -32,16 +32,24 @@ export class TreeNodeSwitcher extends NodeButton { const options = this.options; if (options.layer === 0 && options.isFirstNode && options.isLastNode) { // 只有一层，并且是第一个节点，并且是最后一个节点 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type1", "tree-expand-icon-type1"]; } else if (options.layer === 0 && options.isFirstNode) { // 第一层，并且是第一个节点 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type2", "tree-expand-icon-type2"]; } else if (options.isLastNode) { // 最后一个节点 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type4", "tree-expand-icon-type4"]; } else { // 其他情况 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type3", "tree-expand-icon-type3"]; } } diff --git a/src/case/button/node/treenode.js b/src/case/button/node/treenode.js index f6ef4c5bc..9610cd7a1 100644 --- a/src/case/button/node/treenode.js +++ b/src/case/button/node/treenode.js @@ -61,8 +61,9 @@ export class BasicTreeNode extends NodeButton { items: [ { el: checkbox, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 - }, { + lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, // 偏移公式为每一层的偏移量为节点高度的一半 + }, + { el: { type: Label.xtype, ref: _ref => { @@ -110,5 +111,3 @@ export class BasicTreeNode extends NodeButton { super.setValue(...arguments); } } - - diff --git a/src/case/button/switch.js b/src/case/button/switch.js index f40cf3cf4..f51939219 100644 --- a/src/case/button/switch.js +++ b/src/case/button/switch.js @@ -1,10 +1,11 @@ +import { AbsoluteLayout, shortcut } from "@/core"; +import { TextButton, Label, BasicButton } from "@/base"; + + /** * Created by Windy on 2018/2/1. */ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut } from "../../core"; - @shortcut() export class Switch extends BasicButton { static xtype = "bi.switch"; @@ -28,16 +29,16 @@ export class Switch extends BasicButton { const o = this.options, c = this.constants; const tgap = (o.height - c.CIRCLE_SIZE) / 2; - + return { - type: "bi.absolute", - ref: _ref => { + type: AbsoluteLayout.xtype, + ref: (_ref) => { this.layout = _ref; }, items: [ { el: { - type: "bi.text_button", + type: TextButton.xtype, cls: "circle-button", }, width: 12, @@ -46,27 +47,27 @@ export class Switch extends BasicButton { left: o.selected ? 28 : 4, }, { - type: "bi.label", + type: Label.xtype, text: BI.i18nText("BI-Basic_Simple_Open"), cls: "content-tip", left: 8, top: tgap - 2, invisible: !(o.showTip && o.selected), - ref: _ref => { + ref: (_ref) => { this.openTip = _ref; }, }, { - type: "bi.label", + type: Label.xtype, text: BI.i18nText("BI-Basic_Simple_Close"), cls: "content-tip", right: 8, top: tgap - 2, invisible: !(o.showTip && !o.selected), - ref: _ref => { + ref: (_ref) => { this.closeTip = _ref; }, - } + }, ], }; } diff --git a/src/case/button/treeitem/item.icon.treeleaf.js b/src/case/button/treeitem/item.icon.treeleaf.js index dee13e086..a4dd0d3b8 100644 --- a/src/case/button/treeitem/item.icon.treeleaf.js +++ b/src/case/button/treeitem/item.icon.treeleaf.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../../base/single/button/button.basic"; -import { shortcut, extend, createWidget } from "../../../core"; +import { CenterAdaptLayout, shortcut, extend, createWidget } from "@/core"; +import { Icon, Label, BasicButton } from "@/base"; @shortcut() export class IconTreeLeafItem extends BasicButton { @@ -23,18 +23,20 @@ export class IconTreeLeafItem extends BasicButton { const o = this.options; const icon = createWidget({ - type: "bi.center_adapt", + type: CenterAdaptLayout.xtype, width: 24, cls: o.iconCls, - items: [{ - type: "bi.icon", - width: o.iconWidth, - height: o.iconHeight, - }], + items: [ + { + type: Icon.xtype, + width: o.iconWidth, + height: o.iconHeight, + }, + ], }); this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -46,18 +48,30 @@ export class IconTreeLeafItem extends BasicButton { keyword: o.keyword, }); const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: 16, - el: icon, - }, { - el: this.text, - }); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - hgap: 5, - })))); + const items = BI.LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: 16, + el: icon, + }, + { + el: this.text, + } + ); + createWidget( + extend( + { + element: this, + }, + BI.LogicFactory.createLogic( + type, + extend(o.logic, { + items, + hgap: 5, + }) + ) + ) + ); } doRedMark() { diff --git a/src/case/button/treeitem/item.multilayer.icon.treeleaf.js b/src/case/button/treeitem/item.multilayer.icon.treeleaf.js index 75d67b090..e9fac6ea5 100644 --- a/src/case/button/treeitem/item.multilayer.icon.treeleaf.js +++ b/src/case/button/treeitem/item.multilayer.icon.treeleaf.js @@ -1,5 +1,6 @@ -import { BasicButton } from "../../../base/single/button/button.basic"; -import { shortcut, extend, createWidget, Controller, makeArray, count } from "../../../core"; +import { IconTreeLeafItem } from "./item.icon.treeleaf"; +import { Layout, HorizontalAdaptLayout, shortcut, extend, createWidget, Controller, makeArray, count } from "@/core"; +import { BasicButton } from "@/base"; /** * @class BI.MultiLayerIconTreeLeafItem @@ -8,7 +9,7 @@ import { shortcut, extend, createWidget, Controller, makeArray, count } from ".. @shortcut() export class MultiLayerIconTreeLeafItem extends BasicButton { static xtype = "bi.multilayer_icon_tree_leaf_item"; - + _defaultConfig() { return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-icon-tree-leaf-item bi-list-item-active", @@ -24,7 +25,7 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { super._init(...arguments); const o = this.options; this.item = createWidget({ - type: "bi.icon_tree_leaf_item", + type: IconTreeLeafItem.xtype, cls: "bi-list-item-none", iconCls: o.iconCls, id: o.id, @@ -41,7 +42,8 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { }); this.item.on(Controller.EVENT_CHANGE, (...args) => { const [type] = args; - if (type === BI.Events.CLICK) {// 本身实现click功能 + if (type === BI.Events.CLICK) { + // 本身实现click功能 return; } this.fireEvent(Controller.EVENT_CHANGE, ...args); @@ -50,45 +52,45 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { const items = []; count(0, o.layer, () => { items.push({ - type: "bi.layout", + type: Layout.xtype, width: 15, height: o.height, }); }); items.push(this.item); createWidget({ - type: "bi.horizontal_adapt", + type: HorizontalAdaptLayout.xtype, element: this, columnSize: makeArray(o.layer, 15), items, }); } - doRedMark () { + doRedMark() { this.item.doRedMark(...arguments); } - unRedMark () { + unRedMark() { this.item.unRedMark(...arguments); } - + doHighLight() { this.item.doHighLight(...arguments); } - unHighLight () { + unHighLight() { this.item.unHighLight(...arguments); } - getId () { + getId() { return this.options.id; } - getPId () { + getPId() { return this.options.pId; } - doClick () { + doClick() { super.doClick(...arguments); this.item.setSelected(this.isSelected()); } @@ -102,5 +104,3 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { return this.options.value; } } - - diff --git a/src/case/button/treeitem/treeitem.js b/src/case/button/treeitem/treeitem.js index 189573c33..39277dfa3 100644 --- a/src/case/button/treeitem/treeitem.js +++ b/src/case/button/treeitem/treeitem.js @@ -41,26 +41,31 @@ export class BasicTreeItem extends NodeButton { iconCls, } = this.options; - const icon = isKey(iconCls) ? { - el: { - type: IconLabel.xtype, - iconWidth, - iconHeight, - cls: iconCls, - }, - width: 24, - } : null; - - const indent = layer === 0 ? null : { - el: { - type: Layout.xtype, - height, - width: height, - cls: this.getLineCls(), - }, - lgap: layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 - width: "", - }; + const icon = isKey(iconCls) + ? { + el: { + type: IconLabel.xtype, + iconWidth, + iconHeight, + cls: iconCls, + }, + width: 24, + } + : null; + + const indent = + layer === 0 + ? null + : { + el: { + type: Layout.xtype, + height, + width: height, + cls: this.getLineCls(), + }, + lgap: (layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, // 偏移公式为每一层的偏移量为节点高度的一半 + width: "", + }; return { type: VerticalAdaptLayout.xtype, @@ -97,11 +102,17 @@ export class BasicTreeItem extends NodeButton { if (options.layer === 0 && options.isFirstNode && options.isLastNode) { return ""; } else if (options.layer === 0 && options.isFirstNode) { - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-first-solid-line-conn-background" : "first-line-conn-background"; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-first-solid-line-conn-background" + : "first-line-conn-background"; } else if (options.isLastNode) { - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-last-solid-line-conn-background" : "last-line-conn-background"; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-last-solid-line-conn-background" + : "last-line-conn-background"; } else { - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-mid-solid-line-conn-background" : "mid-line-conn-background"; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-mid-solid-line-conn-background" + : "mid-line-conn-background"; } } diff --git a/src/case/calendar/calendar.date.item.js b/src/case/calendar/calendar.date.item.js index b1b4ef5c5..f5ea79b1d 100644 --- a/src/case/calendar/calendar.date.item.js +++ b/src/case/calendar/calendar.date.item.js @@ -1,5 +1,5 @@ -import { shortcut } from "@/core"; -import { BasicButton } from "@/base"; +import { AbsoluteLayout, shortcut } from "@/core"; +import { TextItem, BasicButton } from "@/base"; /** * 专门为calendar的视觉加的button，作为私有button,不能配置任何属性，也不要用这个玩意 @@ -15,50 +15,52 @@ export class CalendarDateItem extends BasicButton { static xtype = "bi.calendar_date_item"; - render () { + render() { const { text, value, lgap, rgap, tgap, bgap } = this.options; return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.text_item", - cls: "bi-border-radius bi-list-item-select", - textAlign: "center", - text, - value, - ref: _ref => { - this.text = _ref; + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: TextItem.xtype, + cls: "bi-border-radius bi-list-item-select", + textAlign: "center", + text, + value, + ref: _ref => { + this.text = _ref; + }, }, - }, - left: lgap, - right: rgap, - top: tgap, - bottom: bgap, - }], + left: lgap, + right: rgap, + top: tgap, + bottom: bgap, + } + ], }; } - doHighLight () { + doHighLight() { this.text.doHighLight(...arguments); } - unHighLight () { + unHighLight() { this.text.unHighLight(...arguments); } - setValue () { + setValue() { if (!this.isReadOnly()) { this.text.setValue(...arguments); } } - setSelected (b) { + setSelected(b) { super.setSelected(...arguments); this.text.setSelected(b); } - getValue () { + getValue() { return this.text.getValue(); } } diff --git a/src/case/calendar/calendar.js b/src/case/calendar/calendar.js index b049e18b4..82d97b039 100644 --- a/src/case/calendar/calendar.js +++ b/src/case/calendar/calendar.js @@ -1,4 +1,27 @@ -import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core"; +import { Label, ButtonGroup } from "@/base"; +import { + CenterLayout, + shortcut, + Widget, + getDate, + each, + range, + extend, + isLeapYear, + Date, + StartOfWeek, + checkDateVoid, + map, + createWidget, + createItems, + LogicFactory, + Controller, + getShortDayName, + getOffsetDate, + isNotEmptyString, + parseInt +} from "@/core"; +import { CalendarDateItem } from "./calendar.date.item"; /** * Created by GUY on 2015/8/28. @@ -8,17 +31,17 @@ import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, Start @shortcut() export class Calendar extends Widget { static xtype = "bi.calendar"; - - static getPageByDateJSON (json) { + + static getPageByDateJSON(json) { const year = getDate().getFullYear(); const month = getDate().getMonth(); let page = (json.year - year) * 12; page += json.month - 1 - month; - + return page; } - static getDateJSONByPage (v) { + static getDateJSONByPage(v) { const months = getDate().getMonth(); let page = v; @@ -29,17 +52,17 @@ export class Calendar extends Widget { if (page < 0 && page % 12 !== 0) { year--; } - const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12); - + const month = page >= 0 ? page % 12 : (12 + (page % 12)) % 12; + return { year: getDate().getFullYear() + year, month: month + 1, }; } - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-calendar", logic: { @@ -52,8 +75,10 @@ export class Calendar extends Widget { day: 25, }); } - _dateCreator (Y, M, D) { - const { min, max } = this.options, log = {}, De = getDate(); + _dateCreator(Y, M, D) { + const { min, max } = this.options, + log = {}, + De = getDate(); const mins = min.match(/\d+/g); const maxs = max.match(/\d+/g); @@ -78,7 +103,9 @@ export class Calendar extends Widget { const items = []; each(range(42), i => { const td = {}; - let YY = log.ymd[0], MM = log.ymd[1] + 1, DD; + let YY = log.ymd[0], + MM = log.ymd[1] + 1, + DD; // 上个月的日期 if (i < offSetFDay) { td.lastMonth = true; @@ -103,83 +130,101 @@ export class Calendar extends Widget { td.text = DD; items.push(td); }); - + return items; } - _init () { + _init() { super._init(...arguments); const { year, month, day, logic } = this.options; const items = map(this._getWeekLabel(), (i, value) => { return { - type: "bi.label", + type: Label.xtype, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, text: value, }; }); const title = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, height: 44, items, - layouts: [{ - type: "bi.center", - hgap: 5, - vgap: 10, - }], + layouts: [ + { + type: CenterLayout.xtype, + hgap: 5, + vgap: 10, + } + ], }); this.days = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, items: createItems(this._getItems(), {}), value: `${year}-${month}-${day}`, - layouts: [LogicFactory.createLogic("table", extend({}, logic, { - columns: 7, - rows: 6, - columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7], - rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, - }))], + layouts: [ + LogicFactory.createLogic( + "table", + extend({}, logic, { + columns: 7, + rows: 6, + columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7], + rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, + }) + ) + ], }); this.days.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - createWidget(extend({ - element: this, - - }, LogicFactory.createLogic("vertical", extend({}, logic, { - items: LogicFactory.createLogicItemsByDirection("top", title, { - el: this.days, - tgap: -5, - }), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + "vertical", + extend({}, logic, { + items: LogicFactory.createLogicItemsByDirection("top", title, { + el: this.days, + tgap: -5, + }), + }) + ) + ) + ); } - _getWeekLabel () { + _getWeekLabel() { return map(range(0, 7), (idx, v) => getShortDayName((v + StartOfWeek) % 7)); } - isFrontDate () { + isFrontDate() { const { year, month, min, max } = this.options; let Y = year; - const M = month, De = getDate(), day = De.getDay(); + const M = month, + De = getDate(), + day = De.getDay(); Y = Y | 0; De.setFullYear(Y, M, 1); const newDate = getOffsetDate(De, -1 * (day + 1)); - + return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0]; } - isFinalDate () { + isFinalDate() { const { year, month, min, max } = this.options; let Y = year; - const M = month, De = getDate(), day = De.getDay(); + const M = month, + De = getDate(), + day = De.getDay(); Y = Y | 0; De.setFullYear(Y, M, 1); const newDate = getOffsetDate(De, 42 - day); - + return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0]; } - _getItems () { + _getItems() { const o = this.options; const days = this._dateCreator(o.year, o.month - 1, o.day); const items = []; @@ -190,38 +235,40 @@ export class Calendar extends Widget { items.push(days.slice(28, 35)); items.push(days.slice(35, 42)); - return map(items, (i, item) => map(item, (j, td) => { - let month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month); - let year = o.year; - if (month > 12) { - month = 1; - year++; - } else if (month < 1) { - month = 12; - year--; - } - - return extend(td, { - type: "bi.calendar_date_item", - once: false, - forceSelected: true, - value: `${year}-${month}-${td.text}`, - disabled: td.disabled, - cls: td.lastMonth || td.nextMonth ? "bi-tips" : "", - lgap: 2, - rgap: 2, - tgap: 4, - bgap: 4, - // selected: td.currentDay - }); - })); + return map(items, (i, item) => + map(item, (j, td) => { + let month = td.lastMonth ? o.month - 1 : td.nextMonth ? o.month + 1 : o.month; + let year = o.year; + if (month > 12) { + month = 1; + year++; + } else if (month < 1) { + month = 12; + year--; + } + + return extend(td, { + type: CalendarDateItem.xtype, + once: false, + forceSelected: true, + value: `${year}-${month}-${td.text}`, + disabled: td.disabled, + cls: td.lastMonth || td.nextMonth ? "bi-tips" : "", + lgap: 2, + rgap: 2, + tgap: 4, + bgap: 4, + // selected: td.currentDay + }); + }) + ); } _populate() { this.days.populate(this._getItems()); } - setMinDate (minDate) { + setMinDate(minDate) { const o = this.options; if (isNotEmptyString(o.min)) { o.min = minDate; @@ -229,7 +276,7 @@ export class Calendar extends Widget { } } - setMaxDate (maxDate) { + setMaxDate(maxDate) { const o = this.options; if (isNotEmptyString(o.max)) { o.max = maxDate; @@ -237,13 +284,13 @@ export class Calendar extends Widget { } } - setValue (ob) { + setValue(ob) { this.days.setValue([`${ob.year}-${ob.month}-${ob.day}`]); } - getValue () { + getValue() { const date = this.days.getValue()[0].match(/\d+/g); - + return { year: date[0] | 0, month: date[1] | 0, diff --git a/src/case/calendar/calendar.year.js b/src/case/calendar/calendar.year.js index c8ebc58b0..85321b145 100644 --- a/src/case/calendar/calendar.year.js +++ b/src/case/calendar/calendar.year.js @@ -1,4 +1,23 @@ -import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core"; +import { ButtonGroup, TextItem } from "@/base"; +import { + CenterAdaptLayout, + shortcut, + Widget, + extend, + parseDateTime, + range, + checkDateVoid, + print, + getDate, + each, + createWidget, + createItems, + LogicFactory, + Controller, + makeArray, + map, + isNotEmptyString +} from "@/core"; /** * Created by GUY on 2015/8/28. @@ -11,26 +30,26 @@ export class YearCalendar extends Widget { static INTERVAL = 12; // 获取显示的第一年 - static getStartYear (year) { + static getStartYear(year) { const cur = getDate().getFullYear(); - - return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL; + + return year - ((((year - cur + 3) % YearCalendar.INTERVAL) + 12) % YearCalendar.INTERVAL); } - static getEndYear (year) { + static getEndYear(year) { return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1; } - static getPageByYear (year) { + static getPageByYear(year) { const cur = getDate().getFullYear(); year = YearCalendar.getStartYear(year); - + return (year - cur + 3) / YearCalendar.INTERVAL; } - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-year-calendar", behaviors: {}, @@ -43,7 +62,7 @@ export class YearCalendar extends Widget { }); } - _yearCreator (Y) { + _yearCreator(Y) { const { min, max } = this.options; Y = Y | 0; const start = YearCalendar.getStartYear(Y); @@ -53,69 +72,92 @@ export class YearCalendar extends Widget { const endDate = parseDateTime(max, "%Y-%X-%d"); each(range(YearCalendar.INTERVAL), i => { const td = {}; - if (checkDateVoid(start + i, 1, 1, print(getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), print(getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) { + if ( + checkDateVoid( + start + i, + 1, + 1, + print(getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), + print(getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d") + )[0] + ) { td.disabled = true; } td.text = start + i; items.push(td); }); - + return items; } - _init () { + _init() { super._init(...arguments); const { behaviors, logic } = this.options; this.currentYear = getDate().getFullYear(); this.years = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, behaviors, items: createItems(this._getItems(), {}), - layouts: [LogicFactory.createLogic("table", extend({}, logic, { - columns: 2, - rows: 6, - columnSize: [1 / 2, 1 / 2], - rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - })), { - type: "bi.center_adapt", - vgap: 2, - }], + layouts: [ + LogicFactory.createLogic( + "table", + extend({}, logic, { + columns: 2, + rows: 6, + columnSize: [1 / 2, 1 / 2], + rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + }) + ), + { + type: CenterAdaptLayout.xtype, + vgap: 2, + } + ], }); this.years.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - createWidget(extend({ - element: this, - }, LogicFactory.createLogic("vertical", extend({}, logic, { - scrolly: true, - vgap: 5, - hgap: 6, - items: LogicFactory.createLogicItemsByDirection("top", this.years), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + "vertical", + extend({}, logic, { + scrolly: true, + vgap: 5, + hgap: 6, + items: LogicFactory.createLogicItemsByDirection("top", this.years), + }) + ) + ) + ); } - isFrontYear () { + isFrontYear() { const { min, max } = this.options; let Y = this.options.year; Y = Y | 0; - + return !!checkDateVoid(YearCalendar.getStartYear(Y) - 1, 1, 1, min, max)[0]; } - isFinalYear () { + isFinalYear() { const { min, max } = this.options; let Y = this.options.year; Y = Y | 0; - + return !!checkDateVoid(YearCalendar.getEndYear(Y) + 1, 1, 1, min, max)[0]; } - _getItems () { + _getItems() { const { year } = this.options; const years = this._yearCreator(year || this.currentYear); // 纵向排列年 - const len = years.length, tyears = makeArray(len, ""); + const len = years.length, + tyears = makeArray(len, ""); const mapArr = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11]; each(years, (i, y) => { tyears[i] = years[mapArr[i]]; @@ -129,25 +171,29 @@ export class YearCalendar extends Widget { items.push(tyears.slice(8, 10)); items.push(tyears.slice(10, 12)); - return map(items, (i, item) => map(item, (j, td) => extend(td, { - type: "bi.text_item", - cls: "bi-list-item-select bi-border-radius", - textAlign: "center", - whiteSpace: "normal", - once: false, - forceSelected: true, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - width: 45, - value: td.text, - disabled: td.disabled, - }))); + return map(items, (i, item) => + map(item, (j, td) => + extend(td, { + type: TextItem.xtype, + cls: "bi-list-item-select bi-border-radius", + textAlign: "center", + whiteSpace: "normal", + once: false, + forceSelected: true, + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + width: 45, + value: td.text, + disabled: td.disabled, + }) + ) + ); } - _populate () { + _populate() { this.years.populate(this._getItems()); } - setMinDate (minDate) { + setMinDate(minDate) { const o = this.options; if (isNotEmptyString(o.min)) { o.min = minDate; @@ -155,7 +201,7 @@ export class YearCalendar extends Widget { } } - setMaxDate (maxDate) { + setMaxDate(maxDate) { const o = this.options; if (isNotEmptyString(this.options.max)) { o.max = maxDate; @@ -163,11 +209,11 @@ export class YearCalendar extends Widget { } } - setValue (val) { + setValue(val) { this.years.setValue([val]); } - getValue () { + getValue() { return this.years.getValue()[0]; } } diff --git a/src/case/calendar/index.js b/src/case/calendar/index.js index 17c7f5fac..d07f7b8ef 100644 --- a/src/case/calendar/index.js +++ b/src/case/calendar/index.js @@ -1,3 +1,3 @@ -export { CalendarDateItem } from "./calendar.date.item"; -export { Calendar } from "./calendar"; -export { YearCalendar } from "./calendar.year"; +export { CalendarDateItem } from "./calendar.date.item"; +export { Calendar } from "./calendar"; +export { YearCalendar } from "./calendar.year"; diff --git a/src/case/checkbox/check.arrownode.js b/src/case/checkbox/check.arrownode.js index 625e7a6e4..b34751edc 100644 --- a/src/case/checkbox/check.arrownode.js +++ b/src/case/checkbox/check.arrownode.js @@ -1,9 +1,10 @@ +import { shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * Created by roy on 15/10/16. * 右与下箭头切换的树节点 */ -import { shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class ArrowTreeGroupNodeCheckbox extends IconButton { diff --git a/src/case/checkbox/check.checkingmarknode.js b/src/case/checkbox/check.checkingmarknode.js index 4f51a02c1..159988ed0 100644 --- a/src/case/checkbox/check.checkingmarknode.js +++ b/src/case/checkbox/check.checkingmarknode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.CheckingMarkNode * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class CheckingMarkNode extends IconButton { diff --git a/src/case/checkbox/check.first.treenode.js b/src/case/checkbox/check.first.treenode.js index bade32c4d..0f7342a25 100644 --- a/src/case/checkbox/check.first.treenode.js +++ b/src/case/checkbox/check.first.treenode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.FirstTreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class FirstTreeNodeCheckbox extends IconButton { @@ -12,7 +13,10 @@ export class FirstTreeNodeCheckbox extends IconButton { _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type2" + : "tree-collapse-icon-type2", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/checkbox/check.last.treenode.js b/src/case/checkbox/check.last.treenode.js index 93ebc9c66..14875f550 100644 --- a/src/case/checkbox/check.last.treenode.js +++ b/src/case/checkbox/check.last.treenode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.LastTreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class LastTreeNodeCheckbox extends IconButton { @@ -12,7 +13,10 @@ export class LastTreeNodeCheckbox extends IconButton { _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type4" + : "tree-collapse-icon-type4", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/checkbox/check.mid.treenode.js b/src/case/checkbox/check.mid.treenode.js index a9d44de0e..e670d87e0 100644 --- a/src/case/checkbox/check.mid.treenode.js +++ b/src/case/checkbox/check.mid.treenode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.MidTreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class MidTreeNodeCheckbox extends IconButton { @@ -12,7 +13,10 @@ export class MidTreeNodeCheckbox extends IconButton { _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type3" + : "tree-collapse-icon-type3", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/checkbox/check.treenode.js b/src/case/checkbox/check.treenode.js index fa1b54404..6dec8d452 100644 --- a/src/case/checkbox/check.treenode.js +++ b/src/case/checkbox/check.treenode.js @@ -1,18 +1,22 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.TreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class TreeNodeCheckbox extends IconButton { static xtype = "bi.tree_node_checkbox"; - + _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type1" : "tree-collapse-icon-type1", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type1" + : "tree-collapse-icon-type1", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/colorchooser/colorchooser.custom.js b/src/case/colorchooser/colorchooser.custom.js index dd8bf8350..3b260d339 100644 --- a/src/case/colorchooser/colorchooser.custom.js +++ b/src/case/colorchooser/colorchooser.custom.js @@ -1,6 +1,7 @@ -import { shortcut, Widget, extend, createWidget } from "@/core"; -import { ColorPickerEditor } from "./colorpicker"; +import { SimpleHexColorPickerEditor, ColorPickerEditor } from "./colorpicker"; import { Farbtastic } from "./farbtastic/farbtastic"; +import { VTapeLayout, AbsoluteLayout, shortcut, Widget, extend, createWidget } from "@/core"; + /** * 自定义选色 @@ -27,14 +28,14 @@ export class CustomColorChooser extends Widget { super._init(...arguments); const o = this.options; this.editor = createWidget(o.editor, { - type: "bi.simple_hex_color_picker_editor", + type: SimpleHexColorPickerEditor.xtype, value: o.value, }); this.editor.on(ColorPickerEditor.EVENT_CHANGE, () => { this.setValue(this.editor.getValue()); }); this.farbtastic = createWidget({ - type: "bi.farbtastic", + type: Farbtastic.xtype, value: o.value, }); this.farbtastic.on(Farbtastic.EVENT_CHANGE, () => { @@ -42,27 +43,34 @@ export class CustomColorChooser extends Widget { }); createWidget({ - type: "bi.vtape", + type: VTapeLayout.xtype, element: this, - items: [{ - type: "bi.absolute", - items: [{ - el: this.editor, - left: 10, - top: 0, - right: 10, - }], - height: 50, - }, { - type: "bi.absolute", - items: [{ - el: this.farbtastic, - left: 46, - right: 46, - top: 7, - }], - height: 215, - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.editor, + left: 10, + top: 0, + right: 10, + }, + ], + height: 50, + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.farbtastic, + left: 46, + right: 46, + top: 7, + }, + ], + height: 215, + }, + ], }); } @@ -75,4 +83,3 @@ export class CustomColorChooser extends Widget { return this.editor.getValue(); } } - diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js index 20b410a68..7b075eae0 100644 --- a/src/case/colorchooser/colorchooser.js +++ b/src/case/colorchooser/colorchooser.js @@ -1,5 +1,6 @@ -import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core"; import { Combo } from "@/base"; +import { HexColorChooserPopup } from "./colorchooser.popup.hex"; +import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core"; import { ColorChooserPopup } from "./colorchooser.popup"; /** @@ -36,47 +37,56 @@ export class ColorChooser extends Widget { super._init(...arguments); o.value = (o.value || "").toLowerCase(); this.combo = createWidget({ - type: "bi.combo", + type: Combo.xtype, element: this, container: o.container, adjustLength: 1, destroyWhenHide: o.destroyWhenHide, isNeedAdjustWidth: false, isNeedAdjustHeight: false, - el: extend({ - type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", - simple: o.simple, - ref: _ref => { - this.trigger = _ref; + el: extend( + { + type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", + simple: o.simple, + ref: _ref => { + this.trigger = _ref; + }, + value: o.value, + width: o.el.type ? o.width : toPix(o.width, 2), + height: o.el.type ? o.height : toPix(o.height, 2), }, - value: o.value, - width: o.el.type ? o.width : toPix(o.width, 2), - height: o.el.type ? o.height : toPix(o.height, 2), - }, o.el), + o.el + ), popup: () => { return { - el: extend({ - type: "bi.hex_color_chooser_popup", - recommendColorsGetter: o.recommendColorsGetter, - ref: _ref => { - this.colorPicker = _ref; - }, - listeners: [{ - eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, - action: () => { - fn(); - if (!this._isRGBColor(this.colorPicker.getValue())) { - this.combo.hideView(); - } - }, - }, { - eventName: ColorChooserPopup.EVENT_CHANGE, - action: () => { - fn(); - this.combo.hideView(); + el: extend( + { + type: HexColorChooserPopup.xtype, + recommendColorsGetter: o.recommendColorsGetter, + ref: _ref => { + this.colorPicker = _ref; }, - }], - }, o.popup), + listeners: [ + { + eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, + action: () => { + fn(); + if (!this._isRGBColor(this.colorPicker.getValue())) { + this.combo.hideView(); + } + }, + }, + { + eventName: ColorChooserPopup.EVENT_CHANGE, + action: () => { + fn(); + this.combo.hideView(); + }, + } + ], + }, + o.popup + ), value: o.value, width: 300, }; diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js index ce0506e95..7d0f5b02a 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.js +++ b/src/case/colorchooser/colorchooser.popup.hex.js @@ -1,7 +1,26 @@ -import { shortcut, Widget, isNotNull, extend, isNotEmptyString, array2String, map, count, string2Array, filter, isArray, Cache, Queue } from "@/core"; -import { Combo } from "@/base"; +import { + VerticalLayout, + Layout, + AbsoluteLayout, + shortcut, + Widget, + isNotNull, + extend, + isNotEmptyString, + array2String, + map, + count, + string2Array, + filter, + isArray, + Cache, + Queue +} from "@/core"; +import { Label, Combo, TextItem } from "@/base"; +import { PopupPanel } from "../layer"; +import { CustomColorChooser } from "./colorchooser.custom"; import { ColorChooserPopup } from "./colorchooser.popup"; -import { ColorPickerEditor, ColorPicker } from "./colorpicker"; +import { ColorPickerEditor, ColorPicker, HexColorPicker } from "./colorpicker"; /** * @author windy @@ -20,203 +39,244 @@ export class HexColorChooserPopup extends Widget { width: 300, recommendColorsGetter: BI.emptyFn, // 推荐色获取接口 simple: false, // 简单模式, popup中没有自动和透明 - } + }; render() { const o = this.options; const hasRecommendColors = isNotNull(o.recommendColorsGetter()); - - return [{ - type: "bi.vertical", - items: [{ - el: { - type: "bi.vertical", - hgap: 15, - items: [extend({ - type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", - value: o.value, - height: o.simple ? 36 : 70, - listeners: [{ - eventName: ColorPickerEditor.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.colorEditor.getValue()); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args); - }, - }], - ref: _ref => { - this.colorEditor = _ref; - }, - }, o.editor), { + + return [ + { + type: VerticalLayout.xtype, + items: [ + { el: { - type: "bi.hex_color_picker", - cls: "bi-border-bottom bi-border-right", - items: [this._digestStoreColors(this._getStoreColors())], - height: 22, - value: o.value, - listeners: [{ - eventName: ColorPicker.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.storeColors.getValue()[0]); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + type: VerticalLayout.xtype, + hgap: 15, + items: [ + extend( + { + type: o.simple + ? "bi.simple_hex_color_picker_editor" + : "bi.hex_color_picker_editor", + value: o.value, + height: o.simple ? 36 : 70, + listeners: [ + { + eventName: ColorPickerEditor.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.colorEditor.getValue()); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + }, + } + ], + ref: _ref => { + this.colorEditor = _ref; + }, + }, + o.editor + ), + { + el: { + type: HexColorPicker.xtype, + cls: "bi-border-bottom bi-border-right", + items: [this._digestStoreColors(this._getStoreColors())], + height: 22, + value: o.value, + listeners: [ + { + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.storeColors.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + }, + } + ], + ref: _ref => { + this.storeColors = _ref; + }, + }, + tgap: 10, + height: 22, }, - }], - ref: _ref => { - this.storeColors = _ref; - }, - }, - tgap: 10, - height: 22, - }, { - el: hasRecommendColors ? { - type: "bi.vertical", - items: [{ - type: "bi.label", - text: BI.i18nText("BI-Basic_Recommend_Color"), - textAlign: "left", - height: 24, - }, { - type: "bi.hex_color_picker", - cls: "bi-border-bottom bi-border-right", - items: [this._digestStoreColors(o.recommendColorsGetter())], - height: 22, - value: o.value, - listeners: [{ - eventName: ColorPicker.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.recommendColors.getValue()[0]); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + { + el: hasRecommendColors + ? { + type: VerticalLayout.xtype, + items: [ + { + type: Label.xtype, + text: BI.i18nText("BI-Basic_Recommend_Color"), + textAlign: "left", + height: 24, + }, + { + type: HexColorPicker.xtype, + cls: "bi-border-bottom bi-border-right", + items: [this._digestStoreColors(o.recommendColorsGetter())], + height: 22, + value: o.value, + listeners: [ + { + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.recommendColors.getValue()[0]); + this._dealStoreColors(); + this.fireEvent( + ColorChooserPopup.EVENT_CHANGE, + ...args + ); + }, + } + ], + ref: _ref => { + this.recommendColors = _ref; + }, + } + ], + } + : { type: Layout.xtype }, + tgap: hasRecommendColors ? 10 : 0, + height: hasRecommendColors ? 47 : 0, + }, + { + el: { + type: Layout.xtype, + cls: "bi-border-top", }, - }], - ref: _ref => { - this.recommendColors = _ref; + vgap: 10, + height: 1, }, - }], - } : { type: "bi.layout" }, - tgap: hasRecommendColors ? 10 : 0, - height: hasRecommendColors ? 47 : 0, - }, { + { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: HexColorPicker.xtype, + space: true, + value: o.value, + listeners: [ + { + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.colorPicker.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + }, + } + ], + ref: _ref => { + this.colorPicker = _ref; + }, + }, + top: 0, + left: 0, + right: 0, + bottom: 1, + } + ], + height: 80, + } + ], + }, + }, + { el: { - type: "bi.layout", + type: Combo.xtype, cls: "bi-border-top", - }, - vgap: 10, - height: 1, - }, { - type: "bi.absolute", - items: [{ + container: null, + direction: "right,top", + isNeedAdjustHeight: false, el: { - type: "bi.hex_color_picker", - space: true, - value: o.value, - listeners: [{ - eventName: ColorPicker.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.colorPicker.getValue()[0]); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + type: TextItem.xtype, + cls: "color-chooser-popup-more bi-list-item", + textAlign: "center", + height: 24, + textLgap: 10, + text: `${BI.i18nText("BI-Basic_More")}...`, + }, + popup: { + type: PopupPanel.xtype, + buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], + title: BI.i18nText("BI-Custom_Color"), + el: { + type: CustomColorChooser.xtype, + value: o.value, + editor: o.editor, + ref: _ref => { + this.customColorChooser = _ref; }, - }], - ref: _ref => { - this.colorPicker = _ref; }, + stopPropagation: false, + bgap: -1, + rgap: 1, + lgap: 1, + minWidth: 227, + listeners: [ + { + eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, + action: (index, ...args) => { + switch (index) { + case 0: + this.more.hideView(); + break; + case 1: { + const color = this.customColorChooser.getValue(); + // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 + if (isNotEmptyString(color)) { + this.setValue(color); + this._dealStoreColors(); + } + this.more.hideView(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); + break; + } + default: + break; + } + }, + } + ], }, - top: 0, - left: 0, - right: 0, - bottom: 1, - }], - height: 80, - }], - }, - }, { - el: { - type: "bi.combo", - cls: "bi-border-top", - container: null, - direction: "right,top", - isNeedAdjustHeight: false, - el: { - type: "bi.text_item", - cls: "color-chooser-popup-more bi-list-item", - textAlign: "center", - height: 24, - textLgap: 10, - text: `${BI.i18nText("BI-Basic_More")}...`, - }, - popup: { - type: "bi.popup_panel", - buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], - title: BI.i18nText("BI-Custom_Color"), - el: { - type: "bi.custom_color_chooser", - value: o.value, - editor: o.editor, + listeners: [ + { + eventName: Combo.EVENT_AFTER_POPUPVIEW, + action: () => { + this.customColorChooser.setValue(this.getValue()); + }, + } + ], ref: _ref => { - this.customColorChooser = _ref; + this.more = _ref; }, }, - stopPropagation: false, - bgap: -1, - rgap: 1, - lgap: 1, - minWidth: 227, - listeners: [{ - eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, - action: (index, ...args) => { - switch (index) { - case 0: - this.more.hideView(); - break; - case 1: { - const color = this.customColorChooser.getValue(); - // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 - if (isNotEmptyString(color)) { - this.setValue(color); - this._dealStoreColors(); - } - this.more.hideView(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); - break; - } - default: - break; - } + tgap: 10, + height: 24, + } + ], + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "disable-mask", + invisible: !o.disabled, + ref: () => { + this.mask = this; }, - }], - }, - listeners: [{ - eventName: Combo.EVENT_AFTER_POPUPVIEW, - action: () => { - this.customColorChooser.setValue(this.getValue()); }, - }], - ref: _ref => { - this.more = _ref; - }, - }, - tgap: 10, - height: 24, - }], - }, { - type: "bi.absolute", - items: [{ - el: { - type: "bi.layout", - cls: "disable-mask", - invisible: !o.disabled, - ref: () => { - this.mask = this; - }, - }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], - }]; + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], + } + ]; } // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 @@ -256,15 +316,15 @@ export class HexColorChooserPopup extends Widget { disabled: true, }); }); - + return items; } _getStoreColors() { const o = this.options; const colorsArray = string2Array(Cache.getItem("colors") || ""); - - return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true); + + return filter(colorsArray, (idx, color) => (o.simple ? this._isRGBColor(color) : true)); } _isRGBColor(color) { diff --git a/src/case/colorchooser/colorchooser.popup.hex.simple.js b/src/case/colorchooser/colorchooser.popup.hex.simple.js index 608017de2..7ccaa9558 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.simple.js +++ b/src/case/colorchooser/colorchooser.popup.hex.simple.js @@ -1,3 +1,4 @@ +import { HexColorChooserPopup } from "./colorchooser.popup.hex"; import { shortcut, Widget } from "@/core"; import { ColorChooserPopup } from "./colorchooser.popup"; import { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; @@ -16,27 +17,30 @@ export class SimpleHexColorChooserPopup extends Widget { props = { baseCls: "bi-color-chooser-popup", - } + }; render() { const o = this.options; return { - type: "bi.hex_color_chooser_popup", + type: HexColorChooserPopup.xtype, recommendColorsGetter: o.recommendColorsGetter, value: o.value, simple: true, // 是否有自动 - listeners: [{ - eventName: ColorChooserPopup.EVENT_CHANGE, - action: (...args) => { - this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); - }, - }, { - eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, - action: (...args) => { - this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + listeners: [ + { + eventName: ColorChooserPopup.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); + }, }, - }], + { + eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, + action: (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + }, + } + ], ref: _ref => { this.popup = _ref; }, diff --git a/src/case/colorchooser/colorchooser.popup.js b/src/case/colorchooser/colorchooser.popup.js index 7580e7a52..30ffe11fc 100644 --- a/src/case/colorchooser/colorchooser.popup.js +++ b/src/case/colorchooser/colorchooser.popup.js @@ -1,5 +1,24 @@ -import { shortcut, Widget, createWidget, Cache, string2Array, isNotNull, Queue, array2String, map, count, filter, isNotEmptyString, isArray } from "@/core"; -import { Combo } from "@/base"; +import { CustomColorChooser } from "./colorchooser.custom"; +import { PopupPanel } from "../layer"; +import { Combo, TextItem } from "@/base"; +import { + AbsoluteLayout, + VTapeLayout, + Layout, + shortcut, + Widget, + createWidget, + Cache, + string2Array, + isNotNull, + Queue, + array2String, + map, + count, + filter, + isNotEmptyString, + isArray +} from "@/core"; import { ColorPickerEditor, ColorPicker } from "./colorpicker"; /** @@ -21,9 +40,9 @@ export class ColorChooserPopup extends Widget { width: 230, height: 145, simple: false, // 简单模式, popup中没有自动和透明 - } + }; - render () { + render() { const o = this.options; this.colorEditor = createWidget(o.editor, { type: o.simple ? "bi.simple_color_picker_editor" : "bi.color_picker_editor", @@ -39,7 +58,7 @@ export class ColorChooserPopup extends Widget { }); this.storeColors = createWidget({ - type: "bi.color_picker", + type: ColorPicker.xtype, cls: "bi-border-bottom bi-border-right", items: [this._digestStoreColors(this._getStoreColors())], width: 210, @@ -53,7 +72,7 @@ export class ColorChooserPopup extends Widget { }); this.colorPicker = createWidget({ - type: "bi.color_picker", + type: ColorPicker.xtype, width: 210, height: 50, value: o.value, @@ -66,12 +85,12 @@ export class ColorChooserPopup extends Widget { }); this.customColorChooser = createWidget({ - type: "bi.custom_color_chooser", + type: CustomColorChooser.xtype, editor: o.editor, }); const panel = createWidget({ - type: "bi.popup_panel", + type: PopupPanel.xtype, buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], title: BI.i18nText("BI-Custom_Color"), el: this.customColorChooser, @@ -83,13 +102,13 @@ export class ColorChooserPopup extends Widget { }); this.more = createWidget({ - type: "bi.combo", + type: Combo.xtype, cls: "bi-border-top", container: null, direction: "right,top", isNeedAdjustHeight: false, el: { - type: "bi.text_item", + type: TextItem.xtype, cls: "color-chooser-popup-more bi-list-item", textAlign: "center", height: 24, @@ -104,88 +123,100 @@ export class ColorChooserPopup extends Widget { }); panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, (index, ...args) => { switch (index) { - case 0: - this.more.hideView(); - break; - case 1: - this.setValue(this.customColorChooser.getValue()); - this._dealStoreColors(); - this.more.hideView(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); - break; - default: - break; + case 0: + this.more.hideView(); + break; + case 1: + this.setValue(this.customColorChooser.getValue()); + this._dealStoreColors(); + this.more.hideView(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); + break; + default: + break; } }); return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.vtape", - items: [this.colorEditor, { - el: { - type: "bi.absolute", - items: [{ - el: this.storeColors, - left: 10, - right: 10, - top: 5, - }], - }, - height: 29, - }, { - el: { - type: "bi.absolute", - items: [{ - el: this.colorPicker, - left: 10, - right: 10, - top: 5, - bottom: 5, - }], - }, - height: 60, - }, { - el: this.more, - height: 24, - }], + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VTapeLayout.xtype, + items: [ + this.colorEditor, + { + el: { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.storeColors, + left: 10, + right: 10, + top: 5, + }, + ], + }, + height: 29, + }, + { + el: { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.colorPicker, + left: 10, + right: 10, + top: 5, + bottom: 5, + }, + ], + }, + height: 60, + }, + { + el: this.more, + height: 24, + }, + ], + }, + left: 0, + right: 0, + top: 0, + bottom: 0, }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }, { - el: { - type: "bi.layout", - cls: "disable-mask", - invisible: !o.disabled, - ref: () => { - this.mask = this; + { + el: { + type: Layout.xtype, + cls: "disable-mask", + invisible: !o.disabled, + ref: () => { + this.mask = this; + }, }, + left: 0, + right: 0, + top: 0, + bottom: 0, }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], + ], }; } // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 - mounted () { + mounted() { const o = this.options; if (isNotNull(o.value)) { this.setValue(o.value); } } - _setEnable (enable) { + _setEnable(enable) { super._setEnable(...arguments); this.mask.setVisible(!enable); } - _dealStoreColors () { + _dealStoreColors() { const color = this.getValue(); const colors = this._getStoreColors(); const que = new Queue(8); @@ -197,34 +228,34 @@ export class ColorChooserPopup extends Widget { this.setStoreColors(array); } - _digestStoreColors (colors) { + _digestStoreColors(colors) { const items = map(colors, (i, color) => { return { value: color, }; }); - count(colors.length, 8, i => { + count(colors.length, 8, (i) => { items.push({ value: "", disabled: true, }); }); - + return items; } _getStoreColors() { const o = this.options; const colorsArray = string2Array(Cache.getItem("colors") || ""); - - return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true); + + return filter(colorsArray, (idx, color) => (o.simple ? this._isRGBColor(color) : true)); } - _isRGBColor (color) { + _isRGBColor(color) { return isNotEmptyString(color) && color !== "transparent"; } - setStoreColors (colors) { + setStoreColors(colors) { if (isArray(colors)) { this.storeColors.populate([this._digestStoreColors(colors)]); // BI-66973 选中颜色的同时选中历史 @@ -232,13 +263,13 @@ export class ColorChooserPopup extends Widget { } } - setValue (color) { + setValue(color) { this.colorEditor.setValue(color); this.colorPicker.setValue(color); this.storeColors.setValue(color); } - getValue () { + getValue() { return this.colorEditor.getValue(); } } diff --git a/src/case/colorchooser/colorchooser.simple.js b/src/case/colorchooser/colorchooser.simple.js index 6cf9d9ded..f6eaf762d 100644 --- a/src/case/colorchooser/colorchooser.simple.js +++ b/src/case/colorchooser/colorchooser.simple.js @@ -1,3 +1,4 @@ +import { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; import { shortcut, Widget, extend, createWidget } from "@/core"; import { ColorChooser } from "./colorchooser"; @@ -27,7 +28,7 @@ export class SimpleColorChooser extends Widget { const o = this.options; this.combo = createWidget({ - type: "bi.color_chooser", + type: ColorChooser.xtype, simple: o.simple, element: this, container: o.container, @@ -36,7 +37,7 @@ export class SimpleColorChooser extends Widget { height: o.height, destroyWhenHide: o.destroyWhenHide, popup: { - type: "bi.simple_hex_color_chooser_popup", + type: SimpleHexColorChooserPopup.xtype, recommendColorsGetter: o.recommendColorsGetter, }, }); diff --git a/src/case/colorchooser/colorchooser.trigger.js b/src/case/colorchooser/colorchooser.trigger.js index 1187a8460..8412362d0 100644 --- a/src/case/colorchooser/colorchooser.trigger.js +++ b/src/case/colorchooser/colorchooser.trigger.js @@ -1,5 +1,5 @@ -import { shortcut, extend, createWidget, isNotNull } from "@/core"; -import { Trigger } from "@/base"; +import { Layout, AbsoluteLayout, shortcut, extend, createWidget, isNotNull } from "@/core"; +import { IconButton, Trigger } from "@/base"; /** * 选色控件 @@ -14,24 +14,26 @@ export class ColorChooserTrigger extends Trigger { static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig (config) { + _defaultConfig(config) { const conf = super._defaultConfig(...arguments); - + return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, + baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${ + config.simple ? "bi-border-bottom" : "bi-border bi-border-radius" + }`, height: 22, }); } - _init () { + _init() { super._init(...arguments); this.colorContainer = createWidget({ - type: "bi.layout", - cls: "color-chooser-trigger-content" + (BI.isIE9Below && BI.isIE9Below() ? " hack" : "") + type: Layout.xtype, + cls: `color-chooser-trigger-content${BI.isIE9Below && BI.isIE9Below() ? " hack" : ""}`, }); const down = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, disableSelected: true, cls: "icon-combo-down-icon trigger-triangle-font icon-size-12", width: 12, @@ -39,33 +41,45 @@ export class ColorChooserTrigger extends Trigger { }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.colorContainer, - left: 2, - right: 2, - top: 2, - bottom: 2, - }, { - el: down, - right: -1, - bottom: 1, - }], + items: [ + { + el: this.colorContainer, + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + { + el: down, + right: -1, + bottom: 1, + } + ], }); if (isNotNull(this.options.value)) { this.setValue(this.options.value); } } - setValue (color) { + setValue(color) { super.setValue(...arguments); if (color === "") { - this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background"); + this.colorContainer.element + .css("background-color", "") + .removeClass("trans-color-background") + .addClass("auto-color-background"); } else if (color === "transparent") { - this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background"); + this.colorContainer.element + .css("background-color", "") + .removeClass("auto-color-background") + .addClass("trans-color-background"); } else { - this.colorContainer.element.css({ "background-color": color }).removeClass("auto-color-background").removeClass("trans-color-background"); + this.colorContainer.element + .css({ "background-color": color }) + .removeClass("auto-color-background") + .removeClass("trans-color-background"); } } } diff --git a/src/case/colorchooser/colorchooser.trigger.long.js b/src/case/colorchooser/colorchooser.trigger.long.js index 8210e111e..5f80f9979 100644 --- a/src/case/colorchooser/colorchooser.trigger.long.js +++ b/src/case/colorchooser/colorchooser.trigger.long.js @@ -1,5 +1,6 @@ -import { shortcut, extend, createWidget } from "@/core"; -import { Trigger } from "@/base"; +import { HTapeLayout, AbsoluteLayout, shortcut, extend, createWidget } from "@/core"; +import { IconChangeButton } from "../button"; +import { Label, IconButton, Trigger } from "@/base"; /** * 选色控件 @@ -14,46 +15,51 @@ export class LongColorChooserTrigger extends Trigger { static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig (config) { + _defaultConfig(config) { const conf = super._defaultConfig(...arguments); - + return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, + baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${ + config.simple ? "bi-border-bottom" : "bi-border bi-border-radius" + }`, height: 24, }); } - _init () { + _init() { super._init(...arguments); this.colorContainer = createWidget({ - type: "bi.htape", + type: HTapeLayout.xtype, cls: "color-chooser-trigger-content", - items: [{ - type: "bi.icon_change_button", - ref: _ref => { - this.changeIcon = _ref; - }, - disableSelected: true, - iconCls: "auto-color-icon", - width: 24, - iconWidth: 16, - iconHeight: 16, - }, { - el: { - type: "bi.label", + items: [ + { + type: IconChangeButton.xtype, ref: _ref => { - this.label = _ref; + this.changeIcon = _ref; }, - textAlign: "left", - hgap: 5, - height: 18, - text: BI.i18nText("BI-Basic_Auto"), + disableSelected: true, + iconCls: "auto-color-icon", + width: 24, + iconWidth: 16, + iconHeight: 16, }, - }], + { + el: { + type: Label.xtype, + ref: _ref => { + this.label = _ref; + }, + textAlign: "left", + hgap: 5, + height: 18, + text: BI.i18nText("BI-Basic_Auto"), + }, + } + ], }); const down = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, disableSelected: true, cls: "icon-combo-down-icon trigger-triangle-font icon-size-12", width: 12, @@ -61,26 +67,29 @@ export class LongColorChooserTrigger extends Trigger { }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.colorContainer, - left: 2, - right: 2, - top: 2, - bottom: 2, - }, { - el: down, - right: 3, - bottom: 3, - }], + items: [ + { + el: this.colorContainer, + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + { + el: down, + right: 3, + bottom: 3, + } + ], }); if (this.options.value) { this.setValue(this.options.value); } } - setValue (color) { + setValue(color) { super.setValue(...arguments); if (color === "") { this.colorContainer.element.css("background-color", ""); diff --git a/src/case/colorchooser/colorpicker/button/button.colorpicker.js b/src/case/colorchooser/colorpicker/button/button.colorpicker.js index e690eb1f3..8b8702bbc 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorpicker.js +++ b/src/case/colorchooser/colorpicker/button/button.colorpicker.js @@ -16,7 +16,7 @@ export class ColorPickerButton extends BasicButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-color-picker-button bi-background bi-border-top bi-border-left`, }); @@ -34,21 +34,25 @@ export class ColorPickerButton extends BasicButton { this.element.css("background-color", o.value); } const name = this.getName(); - this.element.hover(() => { - this._createMask(); - if (this.isEnabled()) { - Maskers.show(name); - } - }, () => { - if (!this.isSelected()) { - Maskers.hide(name); + this.element.hover( + () => { + this._createMask(); + if (this.isEnabled()) { + Maskers.show(name); + } + }, + () => { + if (!this.isSelected()) { + Maskers.hide(name); + } } - }); + ); } } _createMask() { - const o = this.options, name = this.getName(); + const o = this.options, + name = this.getName(); if (this.isEnabled() && !Maskers.has(name)) { const w = Maskers.make(name, this, { offset: { diff --git a/src/case/colorchooser/colorpicker/button/button.colorshow.js b/src/case/colorchooser/colorpicker/button/button.colorshow.js index 104dfabf2..dd82301c0 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorshow.js +++ b/src/case/colorchooser/colorpicker/button/button.colorshow.js @@ -1,5 +1,5 @@ -import { shortcut } from "@/core"; -import { BasicButton } from "@/base"; +import { HTapeLayout, shortcut } from "@/core"; +import { IconLabel, Label, BasicButton } from "@/base"; /** * @author windy @@ -14,17 +14,17 @@ export class ColorChooserShowButton extends BasicButton { props = { baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius", - } + }; render() { const o = this.options; - + return { - type: "bi.htape", + type: HTapeLayout.xtype, items: [ { el: { - type: "bi.icon_label", + type: IconLabel.xtype, ref: _ref => { this.icon = _ref; }, @@ -33,8 +33,9 @@ export class ColorChooserShowButton extends BasicButton { }, hgap: 20, width: 16, - }, { - type: "bi.label", + }, + { + type: Label.xtype, textAlign: "left", text: o.text, } diff --git a/src/case/colorchooser/colorpicker/button/index.js b/src/case/colorchooser/colorpicker/button/index.js index 59b5c9378..68da81f74 100644 --- a/src/case/colorchooser/colorpicker/button/index.js +++ b/src/case/colorchooser/colorpicker/button/index.js @@ -1,2 +1,2 @@ -export { ColorPickerButton } from "./button.colorpicker"; -export { ColorChooserShowButton } from "./button.colorshow"; \ No newline at end of file +export { ColorPickerButton } from "./button.colorpicker"; +export { ColorChooserShowButton } from "./button.colorshow"; diff --git a/src/case/colorchooser/colorpicker/colorpicker.hex.js b/src/case/colorchooser/colorpicker/colorpicker.hex.js index 5a1b4162b..ef57023df 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/colorpicker.hex.js @@ -1,5 +1,6 @@ -import { shortcut, Widget, extend, each } from "@/core"; import { ButtonGroup } from "@/base"; +import { GridLayout, Layout, shortcut, Widget, extend, each } from "@/core"; +import { ColorPickerButton } from "./button"; /** * @author windy @@ -15,7 +16,7 @@ export class HexColorPicker extends Widget { props = { baseCls: "bi-hex-color-picker", items: null, - } + }; _items = [ [ @@ -163,17 +164,17 @@ export class HexColorPicker extends Widget { value: "#B30072", } ] - ] + ]; render() { const o = this.options; return { - type: "bi.button_group", + type: ButtonGroup.xtype, items: this._digest(o.items || this._items), layouts: [ { - type: "bi.grid", + type: GridLayout.xtype, } ], value: o.value, @@ -197,13 +198,18 @@ export class HexColorPicker extends Widget { each(items, (idx, row) => { const bRow = []; each(row, (idx, item) => { - bRow.push(extend({ - type: "bi.color_picker_button", - once: false, - cls: o.space ? "bi-border-right" : "", - }, item)); + bRow.push( + extend( + { + type: ColorPickerButton.xtype, + once: false, + cls: o.space ? "bi-border-right" : "", + }, + item + ) + ); if (o.space && idx < row.length - 1) { - bRow.push({ type: "bi.layout" }); + bRow.push({ type: Layout.xtype }); } }); blocks.push(bRow); diff --git a/src/case/colorchooser/colorpicker/colorpicker.js b/src/case/colorchooser/colorpicker/colorpicker.js index fa4bd5c9d..f645ec6f6 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.js +++ b/src/case/colorchooser/colorpicker/colorpicker.js @@ -1,5 +1,6 @@ -import { shortcut, Widget, extend, createItems, createWidget } from "@/core"; import { ButtonGroup } from "@/base"; +import { ColorPickerButton } from "./button"; +import { GridLayout, shortcut, Widget, extend, createItems, createWidget } from "@/core"; /** * 简单选色控件 @@ -22,153 +23,223 @@ export class ColorPicker extends Widget { } _items = [ - [{ - value: "#ffffff", - }, { - value: "#f2f2f2", - }, { - value: "#e5e5e5", - }, { - value: "#d9d9d9", - }, { - value: "#cccccc", - }, { - value: "#bfbfbf", - }, { - value: "#b2b2b2", - }, { - value: "#a6a6a6", - }, { - value: "#999999", - }, { - value: "#8c8c8c", - }, { - value: "#808080", - }, { - value: "#737373", - }, { - value: "#666666", - }, { - value: "#4d4d4d", - }, { - value: "#333333", - }, { - value: "#000000", - }], - [{ - value: "#d8b5a6", - }, { - value: "#ff9e9a", - }, { - value: "#ffc17d", - }, { - value: "#f5e56b", - }, { - value: "#d8e698", - }, { - value: "#e0ebaf", - }, { - value: "#c3d825", - }, { - value: "#bbe2e7", - }, { - value: "#85d3cd", - }, { - value: "#bde1e6", - }, { - value: "#a0d8ef", - }, { - value: "#89c3eb", - }, { - value: "#bbc8e6", - }, { - value: "#bbbcde", - }, { - value: "#d6b4cc", - }, { - value: "#fbc0d3", - }], - [{ - value: "#bb9581", - }, { - value: "#f37d79", - }, { - value: "#fba74f", - }, { - value: "#ffdb4f", - }, { - value: "#c7dc68", - }, { - value: "#b0ca71", - }, { - value: "#99ab4e", - }, { - value: "#84b9cb", - }, { - value: "#00a3af", - }, { - value: "#2ca9e1", - }, { - value: "#0095d9", - }, { - value: "#4c6cb3", - }, { - value: "#8491c3", - }, { - value: "#a59aca", - }, { - value: "#cc7eb1", - }, { - value: "#e89bb4", - }], - [{ - value: "#9d775f", - }, { - value: "#dd4b4b", - }, { - value: "#ef8b07", - }, { - value: "#fcc800", - }, { - value: "#aacf53", - }, { - value: "#82ae46", - }, { - value: "#69821b", - }, { - value: "#59b9c6", - }, { - value: "#2a83a2", - }, { - value: "#007bbb", - }, { - value: "#19448e", - }, { - value: "#274a78", - }, { - value: "#4a488e", - }, { - value: "#7058a3", - }, { - value: "#884898", - }, { - value: "#d47596", - }] - ] + [ + { + value: "#ffffff", + }, + { + value: "#f2f2f2", + }, + { + value: "#e5e5e5", + }, + { + value: "#d9d9d9", + }, + { + value: "#cccccc", + }, + { + value: "#bfbfbf", + }, + { + value: "#b2b2b2", + }, + { + value: "#a6a6a6", + }, + { + value: "#999999", + }, + { + value: "#8c8c8c", + }, + { + value: "#808080", + }, + { + value: "#737373", + }, + { + value: "#666666", + }, + { + value: "#4d4d4d", + }, + { + value: "#333333", + }, + { + value: "#000000", + } + ], + [ + { + value: "#d8b5a6", + }, + { + value: "#ff9e9a", + }, + { + value: "#ffc17d", + }, + { + value: "#f5e56b", + }, + { + value: "#d8e698", + }, + { + value: "#e0ebaf", + }, + { + value: "#c3d825", + }, + { + value: "#bbe2e7", + }, + { + value: "#85d3cd", + }, + { + value: "#bde1e6", + }, + { + value: "#a0d8ef", + }, + { + value: "#89c3eb", + }, + { + value: "#bbc8e6", + }, + { + value: "#bbbcde", + }, + { + value: "#d6b4cc", + }, + { + value: "#fbc0d3", + } + ], + [ + { + value: "#bb9581", + }, + { + value: "#f37d79", + }, + { + value: "#fba74f", + }, + { + value: "#ffdb4f", + }, + { + value: "#c7dc68", + }, + { + value: "#b0ca71", + }, + { + value: "#99ab4e", + }, + { + value: "#84b9cb", + }, + { + value: "#00a3af", + }, + { + value: "#2ca9e1", + }, + { + value: "#0095d9", + }, + { + value: "#4c6cb3", + }, + { + value: "#8491c3", + }, + { + value: "#a59aca", + }, + { + value: "#cc7eb1", + }, + { + value: "#e89bb4", + } + ], + [ + { + value: "#9d775f", + }, + { + value: "#dd4b4b", + }, + { + value: "#ef8b07", + }, + { + value: "#fcc800", + }, + { + value: "#aacf53", + }, + { + value: "#82ae46", + }, + { + value: "#69821b", + }, + { + value: "#59b9c6", + }, + { + value: "#2a83a2", + }, + { + value: "#007bbb", + }, + { + value: "#19448e", + }, + { + value: "#274a78", + }, + { + value: "#4a488e", + }, + { + value: "#7058a3", + }, + { + value: "#884898", + }, + { + value: "#d47596", + } + ] + ]; _init() { super._init(...arguments); const o = this.options; this.colors = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, element: this, items: createItems(o.items || this._items, { - type: "bi.color_picker_button", + type: ColorPickerButton.xtype, once: false, }), - layouts: [{ - type: "bi.grid", - }], + layouts: [ + { + type: GridLayout.xtype, + } + ], value: o.value, }); this.colors.on(ButtonGroup.EVENT_CHANGE, (...args) => { @@ -179,7 +250,7 @@ export class ColorPicker extends Widget { populate(items) { const args = [].slice.call(arguments); args[0] = createItems(items, { - type: "bi.color_picker_button", + type: ColorPickerButton.xtype, once: false, }); this.colors.populate.apply(this.colors, args); diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 7b626a37c..8e8a480ec 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -1,8 +1,27 @@ -import { shortcut, Widget, createItems, map, isNumeric, range, extend, isEmptyString, isNull, DOM } from "@/core"; -import { ColorPickerEditor } from "./editor.colorpicker"; +import { Label } from "@/base"; +import { + AbsoluteLayout, + VerticalLayout, + VerticalAdaptLayout, + Layout, + shortcut, + Widget, + createItems, + map, + isNumeric, + range, + extend, + isEmptyString, + isNull, + DOM +} from "@/core"; import { ColorChooserShowButton } from "./button"; +import { ColorPickerEditor } from "./editor.colorpicker"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; -const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; +const RGB_WIDTH = 32, + HEX_WIDTH = 70, + HEX_PREFIX_POSITION = 1; /** * 简单选色控件 @@ -14,18 +33,18 @@ const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; @shortcut() export class HexColorPickerEditor extends Widget { static xtype = "bi.hex_color_picker_editor"; - + static EVENT_CHANGE = "EVENT_CHANGE"; - + props = { baseCls: "bi-color-picker-editor", height: 30, - } + }; render() { this.storeValue = {}; const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", + type: Label.xtype, cls: "color-picker-editor-label", height: 20, }); @@ -33,7 +52,7 @@ export class HexColorPickerEditor extends Widget { const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = map(range(0, 3), () => { return { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -46,7 +65,11 @@ export class HexColorPickerEditor extends Widget { eventName: BI.TextEditor.EVENT_CHANGE, action: () => { this._checkEditors(); - if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + if ( + checker(this.storeValue.r) && + checker(this.storeValue.g) && + checker(this.storeValue.b) + ) { this.colorShow.element.css("background-color", this.getValue()); this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } @@ -57,20 +80,20 @@ export class HexColorPickerEditor extends Widget { }); return { - type: "bi.absolute", + type: AbsoluteLayout.xtype, items: [ { el: { - type: "bi.vertical", + type: VerticalLayout.xtype, tgap: 10, items: [ { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: ["fill", "fill"], height: 24, items: [ { - type: "bi.color_picker_show_button", + type: ColorChooserShowButton.xtype, cls: "trans-color-icon", height: 22, title: BI.i18nText("BI-Transparent_Color"), @@ -87,9 +110,10 @@ export class HexColorPickerEditor extends Widget { ref: _ref => { this.transparent = _ref; }, - }, { + }, + { el: { - type: "bi.color_picker_show_button", + type: ColorChooserShowButton.xtype, cls: "auto-color-icon", height: 22, title: BI.i18nText("BI-Basic_Auto"), @@ -110,16 +134,17 @@ export class HexColorPickerEditor extends Widget { lgap: 10, } ], - }, { + }, + { el: { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH], rgap: 5, items: [ { el: { - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 22, width: 22, @@ -128,12 +153,14 @@ export class HexColorPickerEditor extends Widget { }, }, width: 18, - }, { - type: "bi.label", + }, + { + type: Label.xtype, text: "#", width: 10, - }, { - type: "bi.small_text_editor", + }, + { + type: SmallTextEditor.xtype, ref: _ref => { this.hexEditor = _ref; }, @@ -148,28 +175,41 @@ export class HexColorPickerEditor extends Widget { eventName: "EVENT_CHANGE", action: () => { this._checkHexEditor(); - if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { - this.colorShow.element.css("background-color", this.getValue()); + if ( + checker(this.storeValue.r) && + checker(this.storeValue.g) && + checker(this.storeValue.b) + ) { + this.colorShow.element.css( + "background-color", + this.getValue() + ); this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } }, } ], - }, RGB[0], { + }, + RGB[0], + { el: extend(Ws[0], { ref: _ref => { this.R = _ref; }, }), width: RGB_WIDTH, - }, RGB[1], { + }, + RGB[1], + { el: extend(Ws[1], { ref: _ref => { this.G = _ref; }, }), width: RGB_WIDTH, - }, RGB[2], { + }, + RGB[2], + { el: extend(Ws[2], { ref: _ref => { this.B = _ref; @@ -235,11 +275,20 @@ export class HexColorPickerEditor extends Widget { _showPreColor(color) { if (color === "") { - this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-square-normal-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("trans-color-background") + .addClass("auto-color-square-normal-background"); } else if (color === "transparent") { - this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("auto-color-square-normal-background") + .addClass("trans-color-background"); } else { - this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); + this.colorShow.element + .css({ "background-color": color }) + .removeClass("auto-color-square-normal-background") + .removeClass("trans-color-background"); } } @@ -266,7 +315,7 @@ export class HexColorPickerEditor extends Widget { g: "", b: "", }; - + return; } if (!color) { @@ -293,11 +342,13 @@ export class HexColorPickerEditor extends Widget { if (this._isEmptyRGB() && this.transparent.isSelected()) { return "transparent"; } - - return DOM.rgb2hex(DOM.json2rgb({ - r: this.storeValue.r, - g: this.storeValue.g, - b: this.storeValue.b, - })); + + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.storeValue.r, + g: this.storeValue.g, + b: this.storeValue.b, + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js index f055be894..8f12b325e 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js @@ -1,8 +1,27 @@ -import { shortcut, Widget, extend, isEmptyObject, createItems, isNull, isNumeric, map, isEmptyString, range, DOM } from "@/core"; +import { Label } from "@/base"; +import { + VerticalLayout, + VerticalAdaptLayout, + Layout, + shortcut, + Widget, + extend, + isEmptyObject, + createItems, + isNull, + isNumeric, + map, + isEmptyString, + range, + DOM +} from "@/core"; import { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; import { ColorPickerEditor } from "./editor.colorpicker"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; -const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; +const RGB_WIDTH = 32, + HEX_WIDTH = 70, + HEX_PREFIX_POSITION = 1; /** * @author windy @@ -18,19 +37,19 @@ export class SimpleHexColorPickerEditor extends Widget { props = { baseCls: "bi-color-picker-editor", height: 36, - } + }; - render () { + render() { const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", + type: Label.xtype, cls: "color-picker-editor-label", height: 20, }); - const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = map(range(0, 3), () => { return { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -48,39 +67,41 @@ export class SimpleHexColorPickerEditor extends Widget { this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE); } }, - } + }, ], }; }); return { - type: "bi.vertical", + type: VerticalLayout.xtype, tgap: 10, items: [ { el: { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, rgap: 5, columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH], items: [ { el: { - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 22, width: 22, - ref: _ref => { + ref: (_ref) => { this.colorShow = _ref; }, }, width: 18, - }, { - type: "bi.label", + }, + { + type: Label.xtype, text: "#", width: 10, - }, { - type: "bi.small_text_editor", - ref: _ref => { + }, + { + type: SmallTextEditor.xtype, + ref: (_ref) => { this.hexEditor = _ref; }, cls: "color-picker-editor-input bi-border-radius", @@ -94,49 +115,58 @@ export class SimpleHexColorPickerEditor extends Widget { eventName: "EVENT_CHANGE", action: () => { this._checkHexEditor(); - if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + if ( + checker(this.storeValue.r) && + checker(this.storeValue.g) && + checker(this.storeValue.b) + ) { this.colorShow.element.css("background-color", this.getValue()); this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } }, - } + }, ], - }, RGB[0], { + }, + RGB[0], + { el: extend(Ws[0], { - ref: _ref => { + ref: (_ref) => { this.R = _ref; }, }), width: RGB_WIDTH, - }, RGB[1], { + }, + RGB[1], + { el: extend(Ws[1], { - ref: _ref => { + ref: (_ref) => { this.G = _ref; }, }), width: RGB_WIDTH, - }, RGB[2], { + }, + RGB[2], + { el: extend(Ws[2], { - ref: _ref => { + ref: (_ref) => { this.B = _ref; }, }), rgap: -5, width: RGB_WIDTH, - } + }, ], }, - } + }, ], - }; } - _hexChecker (v) { + _hexChecker(v) { return /^[0-9a-fA-F]{6}$/.test(v); } - _checkEditors () { + _checkEditors() { if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } @@ -149,7 +179,7 @@ export class SimpleHexColorPickerEditor extends Widget { this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION)); } - _checkHexEditor () { + _checkHexEditor() { if (isEmptyString(this.hexEditor.getValue())) { this.hexEditor.setValue("000000"); } @@ -164,7 +194,7 @@ export class SimpleHexColorPickerEditor extends Widget { this.B.setValue(this.storeValue.b); } - setValue (color) { + setValue(color) { this.colorShow.element.css({ "background-color": color }); const json = DOM.rgb2json(DOM.hex2rgb(color)); this.R.setValue(isNull(json.r) ? "" : json.r); @@ -173,11 +203,13 @@ export class SimpleHexColorPickerEditor extends Widget { this.hexEditor.setValue(isEmptyObject(json) ? "" : color.slice(HEX_PREFIX_POSITION)); } - getValue () { - return DOM.rgb2hex(DOM.json2rgb({ - r: this.R.getValue(), - g: this.G.getValue(), - b: this.B.getValue(), - })); + getValue() { + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.R.getValue(), + g: this.G.getValue(), + b: this.B.getValue(), + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.js b/src/case/colorchooser/colorpicker/editor.colorpicker.js index f413ff94d..9f05660f3 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.js @@ -1,5 +1,21 @@ -import { shortcut, Widget, extend, createWidgets, createItems, createWidget, each, isEmptyString, isNumeric, isNull, DOM } from "@/core"; -import { IconButton } from "@/base"; +import { + Layout, + AbsoluteLayout, + VerticalAdaptLayout, + shortcut, + Widget, + extend, + createWidgets, + createItems, + createWidget, + each, + isEmptyString, + isNumeric, + isNull, + DOM +} from "@/core"; +import { Label, IconButton } from "@/base"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; const RGB_WIDTH = 32; @@ -16,7 +32,7 @@ export class ColorPickerEditor extends Widget { static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-color-picker-editor", // width: 200, @@ -24,25 +40,27 @@ export class ColorPickerEditor extends Widget { }); } - _init () { + _init() { super._init(...arguments); this.storeValue = {}; this.colorShow = createWidget({ - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 16, width: 16, }); - const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", - cls: "color-picker-editor-label", - width: 20, - height: 20, - })); + const RGB = createWidgets( + createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + type: Label.xtype, + cls: "color-picker-editor-label", + width: 20, + height: 20, + }) + ); - const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = createWidgets([{}, {}, {}], { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -65,7 +83,7 @@ export class ColorPickerEditor extends Widget { this.B = Ws[2]; this.none = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, cls: "auto-color-icon", width: 16, height: 16, @@ -76,11 +94,11 @@ export class ColorPickerEditor extends Widget { this.none.on(IconButton.EVENT_CHANGE, () => { const value = this.getValue(); this.setValue(""); - (value !== "") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); + value !== "" && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); }); this.transparent = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, cls: "trans-color-icon", width: 16, height: 16, @@ -91,59 +109,67 @@ export class ColorPickerEditor extends Widget { this.transparent.on(IconButton.EVENT_CHANGE, () => { const value = this.getValue(); this.setValue("transparent"); - (value !== "transparent") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); + value !== "transparent" && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, items: [ { el: { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, items: [ { el: this.colorShow, width: 16, - }, { + }, + { el: RGB[0], width: 20, - }, { + }, + { el: this.R, width: RGB_WIDTH, - }, { + }, + { el: RGB[1], width: 20, - }, { + }, + { el: this.G, width: RGB_WIDTH, - }, { + }, + { el: RGB[2], width: 20, - }, { + }, + { el: this.B, width: RGB_WIDTH, - }, { + }, + { el: this.transparent, width: 16, lgap: 5, - }, { + }, + { el: this.none, width: 16, lgap: 5, - } + }, ], }, left: 10, right: 10, top: 0, bottom: 0, - } + }, ], }); } - _checkEditors () { + _checkEditors() { if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } @@ -160,21 +186,30 @@ export class ColorPickerEditor extends Widget { }; } - _isEmptyRGB () { + _isEmptyRGB() { return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b); } - _showPreColor (color) { + _showPreColor(color) { if (color === "") { - this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("trans-color-background") + .addClass("auto-color-normal-background"); } else if (color === "transparent") { - this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("auto-color-normal-background") + .addClass("trans-color-background"); } else { - this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-normal-background").removeClass("trans-color-background"); + this.colorShow.element + .css({ "background-color": color }) + .removeClass("auto-color-normal-background") + .removeClass("trans-color-background"); } } - _setEnable (enable) { + _setEnable(enable) { super._setEnable(...arguments); if (enable === true) { this.element.removeClass("base-disabled disabled"); @@ -183,7 +218,7 @@ export class ColorPickerEditor extends Widget { } } - setValue (color) { + setValue(color) { if (color === "transparent") { this.transparent.setSelected(true); this.none.setSelected(false); @@ -196,7 +231,7 @@ export class ColorPickerEditor extends Widget { g: "", b: "", }; - + return; } if (!color) { @@ -222,11 +257,13 @@ export class ColorPickerEditor extends Widget { if (this._isEmptyRGB() && this.transparent.isSelected()) { return "transparent"; } - - return DOM.rgb2hex(DOM.json2rgb({ - r: this.storeValue.r, - g: this.storeValue.g, - b: this.storeValue.b, - })); + + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.storeValue.r, + g: this.storeValue.g, + b: this.storeValue.b, + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js index 590cd1c37..d64c771bc 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js @@ -1,4 +1,20 @@ -import { shortcut, Widget, extend, isNull, createWidget, isNumeric, createItems, createWidgets, each, isEmptyString, DOM } from "@/core"; +import { + Layout, + VerticalAdaptLayout, + shortcut, + Widget, + extend, + isNull, + createWidget, + isNumeric, + createItems, + createWidgets, + each, + isEmptyString, + DOM +} from "@/core"; +import { Label } from "@/base"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; const RGB_WIDTH = 32; @@ -26,21 +42,23 @@ export class SimpleColorPickerEditor extends Widget { _init() { super._init(...arguments); this.colorShow = createWidget({ - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 16, width: 16, }); - const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", - cls: "color-picker-editor-label", - width: 20, - height: 20, - })); + const RGB = createWidgets( + createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + type: Label.xtype, + cls: "color-picker-editor-label", + width: 20, + height: 20, + }) + ); - const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = createWidgets([{}, {}, {}], { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -63,7 +81,7 @@ export class SimpleColorPickerEditor extends Widget { this.B = Ws[2]; createWidget({ - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, element: this, items: [ { @@ -71,25 +89,31 @@ export class SimpleColorPickerEditor extends Widget { width: 16, lgap: 20, rgap: 15, - }, { + }, + { el: RGB[0], width: 20, - }, { + }, + { el: this.R, width: RGB_WIDTH, - }, { + }, + { el: RGB[1], width: 20, - }, { + }, + { el: this.G, width: RGB_WIDTH, - }, { + }, + { el: RGB[2], width: 20, - }, { + }, + { el: this.B, width: RGB_WIDTH, - } + }, ], }); } @@ -115,10 +139,12 @@ export class SimpleColorPickerEditor extends Widget { } getValue() { - return DOM.rgb2hex(DOM.json2rgb({ - r: this.R.getValue(), - g: this.G.getValue(), - b: this.B.getValue(), - })); + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.R.getValue(), + g: this.G.getValue(), + b: this.B.getValue(), + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/index.js b/src/case/colorchooser/colorpicker/index.js index 73724cae8..dc05c0270 100644 --- a/src/case/colorchooser/colorpicker/index.js +++ b/src/case/colorchooser/colorpicker/index.js @@ -1,7 +1,7 @@ -export { ColorPicker } from "./colorpicker"; -export { HexColorPicker } from "./colorpicker.hex"; -export { ColorPickerEditor } from "./editor.colorpicker"; -export { HexColorPickerEditor } from "./editor.colorpicker.hex"; -export { SimpleHexColorPickerEditor } from "./editor.colorpicker.hex.simple"; -export { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; -export * from "./button"; +export { ColorPicker } from "./colorpicker"; +export { HexColorPicker } from "./colorpicker.hex"; +export { ColorPickerEditor } from "./editor.colorpicker"; +export { HexColorPickerEditor } from "./editor.colorpicker.hex"; +export { SimpleHexColorPickerEditor } from "./editor.colorpicker.hex.simple"; +export { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; +export * from "./button"; diff --git a/src/case/colorchooser/farbtastic/farbtastic.js b/src/case/colorchooser/farbtastic/farbtastic.js index 9a57fbaf8..527d5529b 100644 --- a/src/case/colorchooser/farbtastic/farbtastic.js +++ b/src/case/colorchooser/farbtastic/farbtastic.js @@ -1,7 +1,9 @@ -import { shortcut, isKey, DOM } from "@/core"; +import { AbsoluteLayout, Layout, shortcut, isKey, DOM } from "@/core"; import { BasicButton } from "@/base"; -const RADIUS = 84, SQUARE = 100, WIDTH = 194; +const RADIUS = 84, + SQUARE = 100, + WIDTH = 194; @shortcut() export class Farbtastic extends BasicButton { @@ -15,72 +17,78 @@ export class Farbtastic extends BasicButton { height: 195, stopPropagation: true, value: "#000000", - } + }; render() { this._defaultState(); - + return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.layout", - cls: "", - ref: _ref => { - this.colorWrapper = _ref; + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "", + ref: _ref => { + this.colorWrapper = _ref; + }, }, + top: 47, + left: 47, + width: 101, + height: 101, }, - top: 47, - left: 47, - width: 101, - height: 101, - }, { - el: { - type: "bi.layout", - cls: "wheel", - ref: _ref => { - this.wheel = _ref; + { + el: { + type: Layout.xtype, + cls: "wheel", + ref: _ref => { + this.wheel = _ref; + }, }, + left: 0, + right: 0, + top: 0, + bottom: 0, }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }, { - el: { - type: "bi.layout", - cls: "overlay", - ref: _ref => { - this.overlay = _ref; + { + el: { + type: Layout.xtype, + cls: "overlay", + ref: _ref => { + this.overlay = _ref; + }, }, + top: 47, + left: 47, + width: 101, + height: 101, }, - top: 47, - left: 47, - width: 101, - height: 101, - }, { - el: { - type: "bi.layout", - cls: "marker", - ref: _ref => { - this.hMarker = _ref; + { + el: { + type: Layout.xtype, + cls: "marker", + ref: _ref => { + this.hMarker = _ref; + }, + scrollable: false, + width: 17, + height: 17, }, - scrollable: false, - width: 17, - height: 17, }, - }, { - el: { - type: "bi.layout", - cls: "marker", - ref: _ref => { - this.slMarker = _ref; + { + el: { + type: Layout.xtype, + cls: "marker", + ref: _ref => { + this.slMarker = _ref; + }, + scrollable: false, + width: 17, + height: 17, }, - scrollable: false, - width: 17, - height: 17, - }, - }], + } + ], }; } @@ -97,13 +105,17 @@ export class Farbtastic extends BasicButton { _unpack(color) { if (color.length === 7) { - return [parseInt("0x" + color.substring(1, 3)) / 255, - parseInt("0x" + color.substring(3, 5)) / 255, - parseInt("0x" + color.substring(5, 7)) / 255]; + return [ + parseInt(`0x${color.substring(1, 3)}`) / 255, + parseInt(`0x${color.substring(3, 5)}`) / 255, + parseInt(`0x${color.substring(5, 7)}`) / 255 + ]; } else if (color.length === 4) { - return [parseInt("0x" + color.substring(1, 2)) / 15, - parseInt("0x" + color.substring(2, 3)) / 15, - parseInt("0x" + color.substring(3, 4)) / 15]; + return [ + parseInt(`0x${color.substring(1, 2)}`) / 15, + parseInt(`0x${color.substring(2, 3)}`) / 15, + parseInt(`0x${color.substring(3, 4)}`) / 15 + ]; } } @@ -111,10 +123,16 @@ export class Farbtastic extends BasicButton { const r = Math.round(rgb[0] * 255); const g = Math.round(rgb[1] * 255); const b = Math.round(rgb[2] * 255); - - return "#" + (r < 16 ? "0" : "") + r.toString(16) + - (g < 16 ? "0" : "") + g.toString(16) + - (b < 16 ? "0" : "") + b.toString(16); + + return ( + `#${ + r < 16 ? "0" : "" + }${r.toString(16) + }${g < 16 ? "0" : "" + }${g.toString(16) + }${b < 16 ? "0" : "" + }${b.toString(16)}` + ); } _setColor(color) { @@ -132,7 +150,7 @@ export class Farbtastic extends BasicButton { this.rgb = this._HSLToRGB(hsl); this.value = this._pack(this.rgb); this._updateDisplay(); - + return this; } @@ -152,8 +170,8 @@ export class Farbtastic extends BasicButton { }); this.slMarker.element.css({ - left: `${Math.round(SQUARE * (.5 - this.hsl[1]) + WIDTH / 2)}px`, - top: `${Math.round(SQUARE * (.5 - this.hsl[2]) + WIDTH / 2)}px`, + left: `${Math.round(SQUARE * (0.5 - this.hsl[1]) + WIDTH / 2)}px`, + top: `${Math.round(SQUARE * (0.5 - this.hsl[2]) + WIDTH / 2)}px`, }); // Saturation/Luminance gradient @@ -168,7 +186,7 @@ export class Farbtastic extends BasicButton { r.x += tmp.x; r.y += tmp.y; } - + return r; } @@ -218,7 +236,7 @@ export class Farbtastic extends BasicButton { x = (event.pageX || 0) - pos.x; y = (event.pageY || 0) - pos.y; } - + // Subtract distance to middle return { x: x - WIDTH / 2, y: y - WIDTH / 2 }; } @@ -232,8 +250,8 @@ export class Farbtastic extends BasicButton { if (hue < 0) hue += 1; this._setHSL([hue, this.hsl[1], this.hsl[2]]); } else { - const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + .5)); - const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + .5)); + const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + 0.5)); + const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + 0.5)); this._setHSL([this.hsl[0], sat, lum]); } this.fireEvent(Farbtastic.EVENT_CHANGE, this.getValue(), this); @@ -245,7 +263,7 @@ export class Farbtastic extends BasicButton { // Process this._doMouseMove(event); - + return false; } diff --git a/src/case/colorchooser/index.js b/src/case/colorchooser/index.js index 582eac086..24d8bc806 100644 --- a/src/case/colorchooser/index.js +++ b/src/case/colorchooser/index.js @@ -1,11 +1,11 @@ -export { ColorChooser } from "./colorchooser"; -export { CustomColorChooser } from "./colorchooser.custom"; -export { ColorChooserPopup } from "./colorchooser.popup"; -export { HexColorChooserPopup } from "./colorchooser.popup.hex"; -export { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; -export { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; -export { SimpleColorChooser } from "./colorchooser.simple"; -export { ColorChooserTrigger } from "./colorchooser.trigger"; -export { LongColorChooserTrigger } from "./colorchooser.trigger.long"; -export { Farbtastic } from "./farbtastic/farbtastic"; -export * from "./colorpicker"; +export { ColorChooser } from "./colorchooser"; +export { CustomColorChooser } from "./colorchooser.custom"; +export { ColorChooserPopup } from "./colorchooser.popup"; +export { HexColorChooserPopup } from "./colorchooser.popup.hex"; +export { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; +export { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; +export { SimpleColorChooser } from "./colorchooser.simple"; +export { ColorChooserTrigger } from "./colorchooser.trigger"; +export { LongColorChooserTrigger } from "./colorchooser.trigger.long"; +export { Farbtastic } from "./farbtastic/farbtastic"; +export * from "./colorpicker"; diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js index f7e79c93d..df03267e4 100644 --- a/src/case/combo/bubblecombo/combo.bubble.js +++ b/src/case/combo/bubblecombo/combo.bubble.js @@ -1,11 +1,5 @@ -import { - shortcut, - Widget, - extend, - emptyFn, - createWidget, - isFunction -} from "@/core"; +import { BubblePopupView } from "./popup.bubble"; +import { shortcut, Widget, extend, emptyFn, createWidget, isFunction } from "@/core"; import { Combo } from "@/base"; @shortcut() @@ -76,14 +70,12 @@ export class BubbleCombo extends Widget { popup: () => extend( { - type: "bi.bubble_popup_view", + type: BubblePopupView.xtype, animation: "bi-zoom-big", animationDuring: 200, primary: o.primary, }, - isFunction(this.options.popup) - ? this.options.popup() - : this.options.popup + isFunction(this.options.popup) ? this.options.popup() : this.options.popup ), }); this.combo.on(Combo.EVENT_TRIGGER_CHANGE, (...args) => { @@ -135,5 +127,3 @@ export class BubbleCombo extends Widget { this.combo.adjustHeight(); } } - - diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index 2a6050af0..0f7782160 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -11,7 +11,7 @@ export class BubblePopupView extends PopupView { _defaultConfig() { const config = super._defaultConfig(...arguments); - + return extend(config, { baseCls: `${config.baseCls} bi-text-bubble-bar-popup-view`, text: "", @@ -20,13 +20,13 @@ export class BubblePopupView extends PopupView { _createContent() { const o = this.options; - + return { type: Label.xtype, text: o.text, whiteSpace: "normal", textAlign: "left", - ref: _ref => { + ref: (_ref) => { this.text = _ref; }, }; diff --git a/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js b/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js index b3bb8e29f..4d06ab584 100644 --- a/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js +++ b/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js @@ -1,14 +1,7 @@ -import { - shortcut, - Widget, - extend, - emptyFn, - createWidget, - Controller -} from "@/core"; +import { TextValueCheckComboPopup } from "../textvaluecheckcombo/popup.textvaluecheck"; +import { shortcut, Widget, extend, emptyFn, createWidget, Controller } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { EditorTrigger } from "../../trigger"; -import { TextValueCheckComboPopup } from "../textvaluecheckcombo/popup.textvaluecheck"; @shortcut() export class EditorIconCheckCombo extends Widget { @@ -66,7 +59,7 @@ export class EditorIconCheckCombo extends Widget { }); this.popup = createWidget({ - type: "bi.text_value_check_combo_popup", + type: TextValueCheckComboPopup.xtype, chooseType: o.chooseType, items: o.items, value: o.value, @@ -105,4 +98,4 @@ export class EditorIconCheckCombo extends Widget { this.options.items = items; this.editorIconCheckCombo.populate(items); } -} \ No newline at end of file +} diff --git a/src/case/combo/iconcombo/combo.icon.js b/src/case/combo/iconcombo/combo.icon.js index 338e10183..d7aaf3f63 100644 --- a/src/case/combo/iconcombo/combo.icon.js +++ b/src/case/combo/iconcombo/combo.icon.js @@ -1,13 +1,5 @@ -import { - shortcut, - Widget, - extend, - isFunction, - createWidget, - Controller, - isNull, - isArray -} from "@/core"; +import { IconComboTrigger } from "./trigger.iconcombo"; +import { shortcut, Widget, extend, isFunction, createWidget, Controller, isNull, isArray } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { IconComboPopup } from "./popup.iconcombo"; @@ -52,7 +44,7 @@ export class IconCombo extends Widget { : o.items; super._init(...arguments); this.trigger = createWidget(o.el, { - type: "bi.icon_combo_trigger", + type: IconComboTrigger.xtype, iconCls: o.iconCls, title: o.title, items: o.items, @@ -113,7 +105,7 @@ export class IconCombo extends Widget { getValue() { const value = this.popup.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/iconcombo/popup.iconcombo.js b/src/case/combo/iconcombo/popup.iconcombo.js index a503dd427..6b28bdd81 100644 --- a/src/case/combo/iconcombo/popup.iconcombo.js +++ b/src/case/combo/iconcombo/popup.iconcombo.js @@ -1,12 +1,4 @@ -import { - shortcut, - extend, - createWidget, - createItems, - Controller, - Events, - VerticalLayout -} from "@/core"; +import { shortcut, extend, createWidget, createItems, Controller, Events, VerticalLayout } from "@/core"; import { Pane, ButtonGroup } from "@/base"; import { SingleSelectIconTextItem } from "../../button"; diff --git a/src/case/combo/iconcombo/trigger.iconcombo.js b/src/case/combo/iconcombo/trigger.iconcombo.js index 67293f2fc..4a94241e5 100644 --- a/src/case/combo/iconcombo/trigger.iconcombo.js +++ b/src/case/combo/iconcombo/trigger.iconcombo.js @@ -1,13 +1,4 @@ -import { - shortcut, - extend, - isKey, - createWidget, - isNotEmptyString, - AbsoluteLayout, - isArray, - any -} from "@/core"; +import { shortcut, extend, isKey, createWidget, isNotEmptyString, AbsoluteLayout, isArray, any } from "@/core"; import { Trigger, IconButton } from "@/base"; import { IconChangeButton } from "../../button"; @@ -83,11 +74,11 @@ export class IconComboTrigger extends Trigger { any(items, (i, item) => { if (v === item.value) { iconCls = item.iconCls; - + return true; } }); - + return iconCls; } diff --git a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js index 85004eb22..6080de4ea 100644 --- a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js +++ b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js @@ -1,3 +1,4 @@ +import { IconTextValueComboPopup } from "./popup.icontextvalue"; import { shortcut, Widget, @@ -14,7 +15,6 @@ import { find, contains } from "@/core"; -import { IconTextValueComboPopup } from "./popup.icontextvalue"; import { SelectIconTextTrigger } from "../../trigger"; import { Combo } from "@/base"; @@ -26,11 +26,7 @@ export class IconTextValueCombo extends Widget { _defaultConfig(config) { return extend(super._defaultConfig(...arguments), { - baseCls: - `bi-icon-text-value-combo ${ - config.simple - ? "bi-border-bottom" - : "bi-border bi-border-radius"}`, + baseCls: `bi-icon-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, height: 24, iconHeight: null, iconWidth: null, @@ -42,13 +38,13 @@ export class IconTextValueCombo extends Widget { const o = this.options; o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) + this.setValue(newValue); + }) : o.value; o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { - this.populate(newValue); - }) + this.populate(newValue); + }) : o.items; super._init(...arguments); this.trigger = createWidget({ @@ -66,7 +62,7 @@ export class IconTextValueCombo extends Widget { warningTitle: o.warningTitle, }); this.popup = createWidget({ - type: "bi.icon_text_value_combo_popup", + type: IconTextValueComboPopup.xtype, items: o.items, value: o.value, iconHeight: o.iconHeight, @@ -126,7 +122,7 @@ export class IconTextValueCombo extends Widget { getValue() { const value = this.popup.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/icontextvaluecombo/popup.icontextvalue.js b/src/case/combo/icontextvaluecombo/popup.icontextvalue.js index 02edd74f3..98dd00b1a 100644 --- a/src/case/combo/icontextvaluecombo/popup.icontextvalue.js +++ b/src/case/combo/icontextvaluecombo/popup.icontextvalue.js @@ -1,12 +1,4 @@ -import { - shortcut, - extend, - createWidget, - createItems, - Controller, - Events, - VerticalLayout -} from "@/core"; +import { shortcut, extend, createWidget, createItems, Controller, Events, VerticalLayout } from "@/core"; import { Pane, ButtonGroup } from "@/base"; import { SingleSelectIconTextItem } from "../../button"; @@ -20,7 +12,7 @@ export class IconTextValueComboPopup extends Pane { return extend(super._defaultConfig(...arguments), { baseCls: "bi-icon-text-icon-popup", behaviors: { - redmark () { + redmark() { return true; }, }, diff --git a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js index a5c586773..1db1dec92 100644 --- a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js +++ b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js @@ -1,3 +1,5 @@ +import { SearchTextValueTrigger } from "./trigger.searchtextvalue"; +import { TextValueComboPopup } from "../textvaluecombo/popup.textvalue"; import { shortcut, Widget, @@ -11,9 +13,7 @@ import { find, contains } from "@/core"; -import { SearchTextValueTrigger } from "./trigger.searchtextvalue"; import { ButtonGroup, Combo } from "@/base"; -import { TextValueComboPopup } from "../textvaluecombo/popup.textvalue"; @shortcut() export class SearchTextValueCombo extends Widget { @@ -38,32 +38,30 @@ export class SearchTextValueCombo extends Widget { const o = this.options; o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) + this.setValue(newValue); + }) : o.value; o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { - this.populate(newValue); - }) + this.populate(newValue); + }) : o.items; return { type: Combo.xtype, - cls: - `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius" - } bi-focus-shadow`, + cls: `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`, container: o.container, adjustLength: 2, height: toPix(o.height, o.simple ? 1 : 2), width: toPix(o.width, 2), - ref: _ref => { + ref: (_ref) => { this.combo = _ref; }, el: { - type: "bi.search_text_value_trigger", + type: SearchTextValueTrigger.xtype, cls: "search-text-value-trigger", watermark: o.watermark, - ref: _ref => { + ref: (_ref) => { this.trigger = _ref; }, items: o.items, @@ -90,16 +88,16 @@ export class SearchTextValueCombo extends Widget { this._clear(); this.fireEvent(SearchTextValueCombo.EVENT_CHANGE); }, - } + }, ], }, popup: { el: { - type: "bi.text_value_combo_popup", + type: TextValueComboPopup.xtype, chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, value: o.value, items: o.items, - ref: _ref => { + ref: (_ref) => { this.popup = _ref; this.trigger.getSearcher().setAdapter(this.popup); }, @@ -109,11 +107,9 @@ export class SearchTextValueCombo extends Widget { action: () => { this.setValue(this.getValue()[0]); this.combo.hideView(); - this.fireEvent( - SearchTextValueCombo.EVENT_CHANGE - ); + this.fireEvent(SearchTextValueCombo.EVENT_CHANGE); }, - } + }, ], }, value: o.value, @@ -125,19 +121,15 @@ export class SearchTextValueCombo extends Widget { eventName: Combo.EVENT_AFTER_HIDEVIEW, action: () => { this.trigger.stopEditing(); - this.fireEvent( - SearchTextValueCombo.EVENT_AFTER_HIDEVIEW - ); + this.fireEvent(SearchTextValueCombo.EVENT_AFTER_HIDEVIEW); }, }, { eventName: Combo.EVENT_BEFORE_POPUPVIEW, action: () => { - this.fireEvent( - SearchTextValueCombo.EVENT_BEFORE_POPUPVIEW - ); + this.fireEvent(SearchTextValueCombo.EVENT_BEFORE_POPUPVIEW); }, - } + }, ], }; } @@ -182,7 +174,7 @@ export class SearchTextValueCombo extends Widget { getValue() { const value = this.combo.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } } diff --git a/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js index 36975c1d7..64baf06d7 100644 --- a/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js +++ b/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js @@ -1,12 +1,4 @@ -import { - shortcut, - Controller, - Events, - VerticalLayout, - map, - extend, - concat -} from "@/core"; +import { shortcut, Controller, Events, VerticalLayout, map, extend, concat } from "@/core"; import { ButtonGroup, Pane } from "@/base"; import { SingleSelectItem } from "../../button"; @@ -20,7 +12,7 @@ export class SearchTextValueComboPopup extends Pane { render() { const o = this.options; - + return { type: VerticalLayout.xtype, vgap: 5, @@ -38,7 +30,7 @@ export class SearchTextValueComboPopup extends Pane { } ], behaviors: { - redmark () { + redmark() { return true; }, }, @@ -48,16 +40,9 @@ export class SearchTextValueComboPopup extends Pane { eventName: Controller.EVENT_CHANGE, action: (...args) => { const [type, val, obj] = args; - this.fireEvent( - Controller.EVENT_CHANGE, - ...args - ); + this.fireEvent(Controller.EVENT_CHANGE, ...args); if (type === Events.CLICK) { - this.fireEvent( - SearchTextValueComboPopup.EVENT_CHANGE, - val, - obj - ); + this.fireEvent(SearchTextValueComboPopup.EVENT_CHANGE, val, obj); } }, } @@ -69,15 +54,17 @@ export class SearchTextValueComboPopup extends Pane { _formatItems(items) { const o = this.options; - - return map(items, (i, item) => extend( - { - type: SingleSelectItem.xtype, - textAlign: o.textAlign, - title: item.title || item.text, - }, - item - )); + + return map(items, (i, item) => + extend( + { + type: SingleSelectItem.xtype, + textAlign: o.textAlign, + title: item.title || item.text, + }, + item + ) + ); } mounted() { diff --git a/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js index a090b4c66..96dfd15ec 100644 --- a/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js +++ b/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js @@ -1,16 +1,6 @@ -import { - shortcut, - find, - i18nText, - isNotEmptyString, - VerticalAdaptLayout -} from "@/core"; -import { - ButtonGroup, - Trigger, - Searcher, - IconButton -} from "@/base"; +import { HorizontalFillLayout, shortcut, find, i18nText, isNotEmptyString, VerticalAdaptLayout } from "@/core"; +import { SearchTextValueComboPopup } from "./popup.searchtextvalue"; +import { ButtonGroup, Trigger, Searcher, IconButton } from "@/base"; import { TriggerIconButton } from "../../button"; import { DefaultTextEditor } from "../../editor"; @@ -50,7 +40,7 @@ export class SearchTextValueTrigger extends Trigger { const stateText = this._digest(o.value, o.items) || o.text; return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["fill", 24], items: [ { @@ -72,17 +62,14 @@ export class SearchTextValueTrigger extends Trigger { height: o.height, }, popup: { - type: "bi.search_text_value_combo_popup", + type: SearchTextValueComboPopup.xtype, cls: "bi-card", chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, tipText: i18nText("BI-No_Select"), }, - onSearch (obj, callback) { + onSearch(obj, callback) { const keyword = obj.keyword; - const finding = BI.Func.getSearchResult( - o.items, - keyword - ); + const finding = BI.Func.getSearchResult(o.items, keyword); const matched = finding.match, find = finding.find; callback(matched, find); @@ -91,9 +78,7 @@ export class SearchTextValueTrigger extends Trigger { { eventName: Searcher.EVENT_CHANGE, action: () => { - this.fireEvent( - SearchTextValueTrigger.EVENT_CHANGE - ); + this.fireEvent(SearchTextValueTrigger.EVENT_CHANGE); }, } ], @@ -112,20 +97,13 @@ export class SearchTextValueTrigger extends Trigger { ref: _ref => { this.clearBtn = _ref; }, - cls: - `close-h-font ${ - o.allowClear - ? "clear-button" - : ""}`, + cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`, stopPropagation: true, - invisible: - !isNotEmptyString(stateText), + invisible: !isNotEmptyString(stateText), width: o.height, height: o.height, handler: () => { - this.fireEvent( - SearchTextValueTrigger.EVENT_CLEAR - ); + this.fireEvent(SearchTextValueTrigger.EVENT_CLEAR); }, }, }, @@ -147,7 +125,7 @@ export class SearchTextValueTrigger extends Trigger { _digest(value, items) { const result = find(items, (i, item) => item.value === value); - + return result?.text; } @@ -166,8 +144,7 @@ export class SearchTextValueTrigger extends Trigger { setValue(vals) { const digestText = this._digest(vals, this.options.items); this._setState(digestText); - this.options.allowClear && - this.clearBtn.setVisible(isNotEmptyString(digestText)); + this.options.allowClear && this.clearBtn.setVisible(isNotEmptyString(digestText)); } getValue() { diff --git a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js index c2fcfe901..cd8079878 100644 --- a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js +++ b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js @@ -1,15 +1,4 @@ -import { - shortcut, - Widget, - extend, - isFunction, - createWidget, - toPix, - Controller, - isKey, - isNull, - isArray -} from "@/core"; +import { shortcut, Widget, extend, isFunction, createWidget, toPix, Controller, isKey, isNull, isArray } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { TextValueCheckComboPopup } from "./popup.textvaluecheck"; import { SelectTextTrigger } from "../../trigger"; @@ -22,9 +11,7 @@ export class TextValueCheckCombo extends Widget { _defaultConfig(config) { return extend(super._defaultConfig(...arguments), { - baseCls: - `bi-text-value-check-combo ${ - config.simple ? "bi-border-bottom" : "bi-border"}`, + baseCls: `bi-text-value-check-combo ${config.simple ? "bi-border-bottom" : "bi-border"}`, width: 100, height: 24, chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, @@ -64,9 +51,12 @@ export class TextValueCheckCombo extends Widget { this.textIconCheckCombo.hideView(); this.fireEvent(TextValueCheckCombo.EVENT_CHANGE); }); - this.popup.on(Controller.EVENT_CHANGE, ...args => { - this.fireEvent(Controller.EVENT_CHANGE, ...args); - }); + this.popup.on( + Controller.EVENT_CHANGE, + ...args => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); + } + ); this.textIconCheckCombo = createWidget({ type: Combo.xtype, container: o.container, @@ -102,7 +92,7 @@ export class TextValueCheckCombo extends Widget { getValue() { const value = this.popup.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js b/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js index 9c32c2b68..6520d1099 100644 --- a/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js +++ b/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js @@ -1,12 +1,4 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - VerticalLayout, - map -} from "@/core"; +import { shortcut, extend, createWidget, Controller, Events, VerticalLayout, map } from "@/core"; import { Pane, ButtonGroup } from "@/base"; import { SingleSelectItem } from "../../button"; @@ -56,16 +48,18 @@ export class TextValueCheckComboPopup extends Pane { _formatItems(items) { const o = this.options; - - return map(items, (i, item) => extend( - { - type: SingleSelectItem.xtype, - cls: "bi-list-item", - textAlign: o.textAlign, - title: item.title || item.text, - }, - item - )); + + return map(items, (i, item) => + extend( + { + type: SingleSelectItem.xtype, + cls: "bi-list-item", + textAlign: o.textAlign, + title: item.title || item.text, + }, + item + ) + ); } populate(items) { diff --git a/src/case/combo/textvaluecombo/combo.textvalue.js b/src/case/combo/textvaluecombo/combo.textvalue.js index a9bf892b5..d6b307026 100644 --- a/src/case/combo/textvaluecombo/combo.textvalue.js +++ b/src/case/combo/textvaluecombo/combo.textvalue.js @@ -1,3 +1,4 @@ +import { TextValueComboPopup } from "./popup.textvalue"; import { shortcut, Widget, @@ -15,7 +16,6 @@ import { } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { SelectTextTrigger } from "../../trigger"; -import { TextValueComboPopup } from "./popup.textvalue"; @shortcut() export class TextValueCombo extends Widget { @@ -25,11 +25,7 @@ export class TextValueCombo extends Widget { _defaultConfig(config) { return extend(super._defaultConfig(...arguments), { - baseCls: - `bi-text-value-combo ${ - config.simple - ? "bi-border-bottom" - : "bi-border bi-border-radius"}`, + baseCls: `bi-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, height: 24, chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, text: "", @@ -47,13 +43,13 @@ export class TextValueCombo extends Widget { const o = this.options; o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) + this.setValue(newValue); + }) : o.value; o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { - this.populate(newValue); - }) + this.populate(newValue); + }) : o.items; super._init(...arguments); } @@ -71,7 +67,7 @@ export class TextValueCombo extends Widget { text: o.warningTitle, }; } - + return { level: "success", }; @@ -79,7 +75,7 @@ export class TextValueCombo extends Widget { const trigger = { type: SelectTextTrigger.xtype, - ref: ref => (this.trigger = ref), + ref: (ref) => (this.trigger = ref), cls: "text-value-trigger", items: o.items, height: toPix(o.height, o.simple ? 1 : 2), @@ -95,14 +91,14 @@ export class TextValueCombo extends Widget { this._clear(); this.fireEvent(TextValueCombo.EVENT_CHANGE); }, - } + }, ], ...o.el, }; let changeTag = false; const popup = { - type: "bi.text_value_combo_popup", - ref: ref => (this.popup = ref), + type: TextValueComboPopup.xtype, + ref: (ref) => (this.popup = ref), chooseType: o.chooseType, items: o.items, allowSelectAll: o.allowSelectAll, @@ -115,15 +111,9 @@ export class TextValueCombo extends Widget { this.setValue(value); if (o.chooseType === ButtonGroup.CHOOSE_TYPE_SINGLE) { this.combo.hideView(...args); - this.fireEvent( - TextValueCombo.EVENT_CHANGE, - ...args - ); + this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args); } - if ( - o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && - isEmptyArray(value) - ) { + if (o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && isEmptyArray(value)) { this._clear(); } }, @@ -147,7 +137,7 @@ export class TextValueCombo extends Widget { action: (...args) => { this.combo.hideView(); }, - } + }, ], }; @@ -155,7 +145,7 @@ export class TextValueCombo extends Widget { type: Combo.xtype, height: toPix(o.height, 2), width: toPix(o.width, 2), - ref: ref => (this.combo = ref), + ref: (ref) => (this.combo = ref), container: o.container, direction: o.direction, adjustLength: 2, @@ -170,27 +160,17 @@ export class TextValueCombo extends Widget { { eventName: Combo.EVENT_AFTER_HIDEVIEW, action: (...args) => { - if ( - o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE && - changeTag - ) { - this.fireEvent( - TextValueCombo.EVENT_CHANGE, - ...args - ); + if (o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE && changeTag) { + this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args); } }, - } + }, ], popup: { el: popup, value: o.value, maxHeight: 240, - minHeight: - o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && - o.allowSelectAll - ? 55 - : 25, + minHeight: o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && o.allowSelectAll ? 55 : 25, }, }; } @@ -211,7 +191,7 @@ export class TextValueCombo extends Widget { _checkError(v) { if (isNull(v)) { this.setStatus("success"); - + return; } @@ -247,7 +227,7 @@ export class TextValueCombo extends Widget { getValue() { const value = this.combo.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/textvaluecombo/combo.textvaluesmall.js b/src/case/combo/textvaluecombo/combo.textvaluesmall.js index d531e1885..c6bfe6180 100644 --- a/src/case/combo/textvaluecombo/combo.textvaluesmall.js +++ b/src/case/combo/textvaluecombo/combo.textvaluesmall.js @@ -1,11 +1,7 @@ -import { - shortcut, - Widget, - extend -} from "@/core"; +import { TextValueCombo } from "./combo.textvalue"; +import { shortcut, Widget, extend } from "@/core"; import { ButtonGroup } from "@/base"; import { SmallSelectTextTrigger } from "../../trigger"; -import { TextValueCombo } from "./combo.textvalue"; @shortcut() export class SmallTextValueCombo extends Widget { @@ -25,10 +21,10 @@ export class SmallTextValueCombo extends Widget { render() { const o = this.options; - + return { - type: "bi.text_value_combo", - ref: _ref => { + type: TextValueCombo.xtype, + ref: (_ref) => { this.combo = _ref; }, height: o.height, @@ -47,12 +43,9 @@ export class SmallTextValueCombo extends Widget { { eventName: TextValueCombo.EVENT_CHANGE, action: (...args) => { - this.fireEvent( - SmallTextValueCombo.EVENT_CHANGE, - ...args - ); + this.fireEvent(SmallTextValueCombo.EVENT_CHANGE, ...args); }, - } + }, ], }; } diff --git a/src/case/combo/textvaluecombo/popup.textvalue.js b/src/case/combo/textvaluecombo/popup.textvalue.js index a9fa0caaf..b0b22a048 100644 --- a/src/case/combo/textvaluecombo/popup.textvalue.js +++ b/src/case/combo/textvaluecombo/popup.textvalue.js @@ -55,16 +55,9 @@ export class TextValueComboPopup extends Pane { { eventName: Controller.EVENT_CHANGE, action: (type, val, obj) => { - this.fireEvent( - Controller.EVENT_CHANGE, - arguments - ); + this.fireEvent(Controller.EVENT_CHANGE, arguments); if (type === Events.CLICK) { - this.fireEvent( - TextValueComboPopup.EVENT_CHANGE, - val, - obj - ); + this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val, obj); } }, } @@ -73,7 +66,7 @@ export class TextValueComboPopup extends Pane { ], }; } - + return { type: VerticalLayout.xtype, verticalAlign: VerticalAlign.Stretch, @@ -104,11 +97,8 @@ export class TextValueComboPopup extends Pane { listeners: [ { eventName: SelectList.EVENT_CHANGE, - action (val) { - this.fireEvent( - TextValueComboPopup.EVENT_CHANGE, - val - ); + action(val) { + this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val); }, } ], @@ -123,18 +113,14 @@ export class TextValueComboPopup extends Pane { type: TextButton.xtype, text: i18nText("BI-Basic_Clears"), handler: () => { - this.fireEvent( - TextValueComboPopup.EVENT_CLEAR - ); + this.fireEvent(TextValueComboPopup.EVENT_CLEAR); }, }, { type: TextButton.xtype, text: i18nText("BI-Basic_OK"), handler: () => { - this.fireEvent( - TextValueComboPopup.EVENT_CONFIRM - ); + this.fireEvent(TextValueComboPopup.EVENT_CONFIRM); }, } ], @@ -168,10 +154,7 @@ export class TextValueComboPopup extends Pane { { eventName: ListPane.EVENT_CHANGE, action: val => { - this.fireEvent( - TextValueComboPopup.EVENT_CHANGE, - val - ); + this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val); }, } ], @@ -188,19 +171,19 @@ export class TextValueComboPopup extends Pane { _formatItems(items) { const o = this.options; - - return map(items, (i, item) => extend( - { - type: - o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI - ? SingleSelectItem.xtype - : MultiSelectItem.xtype, - iconWrapperWidth: 36, - textAlign: o.textAlign, - title: item.title || item.text, - }, - item - )); + + return map(items, (i, item) => + extend( + { + type: + o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI ? SingleSelectItem.xtype : MultiSelectItem.xtype, + iconWrapperWidth: 36, + textAlign: o.textAlign, + title: item.title || item.text, + }, + item + ) + ); } populate(items) { @@ -229,7 +212,7 @@ export class TextValueComboPopup extends Pane { } if (!this.options.allowSelectAll) { this.popup.setValue(v); - + return; } this.popup.setValue({ diff --git a/src/case/editor/editor.clear.js b/src/case/editor/editor.clear.js index c536e3ec1..a35a4302e 100644 --- a/src/case/editor/editor.clear.js +++ b/src/case/editor/editor.clear.js @@ -1,5 +1,16 @@ -import { shortcut, Widget, extend, emptyFn, isKey, isFunction, createWidget, Controller, Events } from "@/core"; import { Editor, IconButton } from "@/base"; +import { + HTapeLayout, + shortcut, + Widget, + extend, + emptyFn, + isKey, + isFunction, + createWidget, + Controller, + Events +} from "@/core"; /** * 有清除按钮的文本框 @@ -9,31 +20,31 @@ import { Editor, IconButton } from "@/base"; */ @shortcut() export class ClearEditor extends Widget { - static xtype = "bi.clear_editor" + static xtype = "bi.clear_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_BACKSPACE = "EVENT_BACKSPACE" - static EVENT_CLEAR = "EVENT_CLEAR" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_REMOVE = "EVENT_REMOVE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_BACKSPACE = "EVENT_BACKSPACE"; + static EVENT_CLEAR = "EVENT_CLEAR"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_REMOVE = "EVENT_REMOVE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-clear-editor", height: 24, @@ -46,12 +57,14 @@ export class ClearEditor extends Widget { _init() { const o = this.options; - o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) : o.value; + o.value = isFunction(o.value) + ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); + }) + : o.value; super._init(...arguments); this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, watermark: o.watermark, @@ -63,7 +76,7 @@ export class ClearEditor extends Widget { autoTrim: o.autoTrim, }); this.clear = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, stopEvent: true, invisible: !isKey(o.value), cls: "search-close-h-font", @@ -75,14 +88,15 @@ export class ClearEditor extends Widget { }); createWidget({ element: this, - type: "bi.htape", - items: [{ - el: this.editor, - }, - { - el: this.clear, - width: 24, - } + type: HTapeLayout.xtype, + items: [ + { + el: this.editor, + }, + { + el: this.clear, + width: 24, + } ], }); this.editor.on(Controller.EVENT_CHANGE, (...args) => { @@ -112,7 +126,6 @@ export class ClearEditor extends Widget { this.fireEvent(ClearEditor.EVENT_BACKSPACE); }); - this.editor.on(Editor.EVENT_VALID, () => { this.fireEvent(ClearEditor.EVENT_VALID); }); diff --git a/src/case/editor/editor.defaulttext.js b/src/case/editor/editor.defaulttext.js index 7597347d7..d8db6f2da 100644 --- a/src/case/editor/editor.defaulttext.js +++ b/src/case/editor/editor.defaulttext.js @@ -1,6 +1,15 @@ - -import { shortcut, Widget, emptyFn, isKey, isFunction, createWidget, nextTick, Controller } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + emptyFn, + isKey, + isFunction, + createWidget, + nextTick, + Controller +} from "@/core"; /** * dailer @@ -10,25 +19,25 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class DefaultTextEditor extends Widget { - static xtype = "bi.default_text_editor" - - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static xtype = "bi.default_text_editor"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; props() { return { @@ -54,7 +63,7 @@ export class DefaultTextEditor extends Widget { render() { const o = this.options; this.editor = createWidget(o.el, { - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -76,7 +85,7 @@ export class DefaultTextEditor extends Widget { const showText = isFunction(o.text) ? o.text() : o.text; this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style", textAlign: "left", height: o.height, @@ -153,20 +162,23 @@ export class DefaultTextEditor extends Widget { }); return { - type: "bi.absolute", - items: [{ - el: this.editor, - left: 0, - right: 0, - top: 0, - bottom: 0, - }, { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], + type: AbsoluteLayout.xtype, + items: [ + { + el: this.editor, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }; } @@ -273,7 +285,7 @@ export class DefaultTextEditor extends Widget { if (isKey(v)) { this.text.setText(v); this.text.element.removeClass("bi-water-mark"); - + return; } this.text.setText(o.defaultText); diff --git a/src/case/editor/editor.shelter.js b/src/case/editor/editor.shelter.js index 7517c6320..054bb37b6 100644 --- a/src/case/editor/editor.shelter.js +++ b/src/case/editor/editor.shelter.js @@ -1,5 +1,17 @@ -import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, Controller, isKey, nextTick, bind } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + extend, + emptyFn, + isFunction, + createWidget, + Controller, + isKey, + nextTick, + bind +} from "@/core"; /** * 带标记的文本框 @@ -9,29 +21,29 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class ShelterEditor extends Widget { - static xtype = "bi.shelter_editor" + static xtype = "bi.shelter_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-shelter-editor`, hgap: 4, @@ -49,15 +61,17 @@ export class ShelterEditor extends Widget { textAlign: "left", }); } - + _init() { const o = this.options; - o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) : o.value; + o.value = isFunction(o.value) + ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); + }) + : o.value; super._init(...arguments); this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -75,7 +89,7 @@ export class ShelterEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "shelter-editor-text", title: o.title, warningTitle: o.warningTitle, @@ -149,131 +163,136 @@ export class ShelterEditor extends Widget { this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - }], + items: [ + { + el: this.text, + inset: 0, + }, + { + el: this.editor, + inset: 0, + } + ], }); this._showHint(); this._checkText(); } - + _checkText() { const o = this.options; - nextTick(bind(function () { - if (this.editor.getValue() === "") { - this.text.setValue(o.watermark || ""); - this.text.element.addClass("bi-water-mark"); - } else { - this.text.setValue(this.editor.getValue()); - this.text.element.removeClass("bi-water-mark"); - } - isKey(o.keyword) && this.text.doRedMark(o.keyword); - }, this)); + nextTick( + bind(function () { + if (this.editor.getValue() === "") { + this.text.setValue(o.watermark || ""); + this.text.element.addClass("bi-water-mark"); + } else { + this.text.setValue(this.editor.getValue()); + this.text.element.removeClass("bi-water-mark"); + } + isKey(o.keyword) && this.text.doRedMark(o.keyword); + }, this) + ); } - + _showInput() { this.editor.visible(); this.text.invisible(); } - + _showHint() { this.editor.invisible(); this.text.visible(); } - + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); } - + setTitle(title) { this.text.setTitle(title); } - + setWarningTitle(title) { this.text.setWarningTitle(title); } - + focus() { this._showInput(); this.editor.focus(); } - + blur() { this.editor.blur(); this._showHint(); this._checkText(); } - + doRedMark() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doRedMark(...arguments); } - + unRedMark() { this.text.unRedMark(...arguments); } - + doHighLight() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doHighLight(...arguments); } - + unHighLight() { this.text.unHighLight(...arguments); } - + isValid() { return this.editor.isValid(); } - + setErrorText(text) { this.editor.setErrorText(text); } - + getErrorText() { return this.editor.getErrorText(); } - + isEditing() { return this.editor.isEditing(); } - + getLastValidValue() { return this.editor.getLastValidValue(); } - + getLastChangedValue() { return this.editor.getLastChangedValue(); } - + setTextStyle(style) { this.text.setStyle(style); } - + setValue(k) { this.editor.setValue(k); this._checkText(); } - + getValue() { return this.editor.getValue(); } - + getState() { return this.text.getValue(); } - + setState(v) { this._showHint(); this.text.setValue(v); diff --git a/src/case/editor/editor.sign.js b/src/case/editor/editor.sign.js index 08feca088..f5b4712b4 100644 --- a/src/case/editor/editor.sign.js +++ b/src/case/editor/editor.sign.js @@ -1,5 +1,17 @@ -import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, nextTick, isKey, bind, Controller } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + extend, + emptyFn, + isFunction, + createWidget, + nextTick, + isKey, + bind, + Controller +} from "@/core"; /** * 带标记的文本框 @@ -9,30 +21,30 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class SignEditor extends Widget { - static xtype = "bi.sign_editor" + static xtype = "bi.sign_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-sign-editor`, hgap: 4, @@ -53,12 +65,14 @@ export class SignEditor extends Widget { _init() { const o = this.options; - o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) : o.value; + o.value = isFunction(o.value) + ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); + }) + : o.value; super._init(...arguments); this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -76,7 +90,7 @@ export class SignEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "sign-editor-text", title: o.title, warningTitle: o.warningTitle, @@ -156,15 +170,18 @@ export class SignEditor extends Widget { this.fireEvent(SignEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - }], + items: [ + { + el: this.text, + inset: 0, + }, + { + el: this.editor, + inset: 0, + } + ], }); this._showHint(); this._checkText(); @@ -172,16 +189,18 @@ export class SignEditor extends Widget { _checkText() { const o = this.options; - nextTick(bind(function () { - if (this.editor.getValue() === "") { - this.text.setValue(o.watermark || ""); - this.text.element.addClass("bi-water-mark"); - } else { - this.text.setValue(this.editor.getValue()); - this.text.element.removeClass("bi-water-mark"); - isKey(o.keyword) && this.text.doRedMark(o.keyword); - } - }, this)); + nextTick( + bind(function () { + if (this.editor.getValue() === "") { + this.text.setValue(o.watermark || ""); + this.text.element.addClass("bi-water-mark"); + } else { + this.text.setValue(this.editor.getValue()); + this.text.element.removeClass("bi-water-mark"); + isKey(o.keyword) && this.text.doRedMark(o.keyword); + } + }, this) + ); } _showInput() { @@ -256,7 +275,7 @@ export class SignEditor extends Widget { getErrorText() { return this.editor.getErrorText(); } - + isEditing() { return this.editor.isEditing(); } diff --git a/src/case/editor/editor.state.js b/src/case/editor/editor.state.js index d11dc059d..09625729c 100644 --- a/src/case/editor/editor.state.js +++ b/src/case/editor/editor.state.js @@ -1,5 +1,22 @@ -import { shortcut, Widget, extend, emptyFn, i18nText, isArray, createWidget, nextTick, Controller, isNotNull, isString, isKey, isFunction, isNumber, isEmpty } from "@/core"; -import { TextButton, Editor } from "@/base"; +import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + extend, + emptyFn, + i18nText, + isArray, + createWidget, + nextTick, + Controller, + isNotNull, + isString, + isKey, + isFunction, + isNumber, + isEmpty +} from "@/core"; /** * guy @@ -9,29 +26,29 @@ import { TextButton, Editor } from "@/base"; */ @shortcut() export class StateEditor extends Widget { - static xtype = "bi.state_editor" + static xtype = "bi.state_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-state-editor`, hgap: 4, @@ -51,12 +68,12 @@ export class StateEditor extends Widget { el: {}, }); } - + _init() { super._init(...arguments); const o = this.options; this.editor = createWidget(o.el, { - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -74,7 +91,7 @@ export class StateEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "bi-water-mark tip-text-style", textAlign: "left", height: o.height, @@ -85,17 +102,19 @@ export class StateEditor extends Widget { this.editor.focus(); this.editor.setValue(""); }, - title: isNotNull(o.tipText) ? o.tipText : () => { - let title = ""; - if (isString(this.stateValue)) { - title = this.stateValue; - } - if (isArray(this.stateValue) && this.stateValue.length === 1) { - title = this.stateValue[0]; - } - - return title; - }, + title: isNotNull(o.tipText) + ? o.tipText + : () => { + let title = ""; + if (isString(this.stateValue)) { + title = this.stateValue; + } + if (isArray(this.stateValue) && this.stateValue.length === 1) { + title = this.stateValue[0]; + } + + return title; + }, warningTitle: o.warningTitle, tipType: o.tipType, }); @@ -159,112 +178,115 @@ export class StateEditor extends Widget { this.fireEvent(StateEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - }], + items: [ + { + el: this.text, + inset: 0, + }, + { + el: this.editor, + inset: 0, + } + ], }); this._showHint(); if (isNotNull(o.text)) { this.setState(o.text); } } - + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); } - + doRedMark() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doRedMark(...arguments); } - + unRedMark() { this.text.unRedMark(...arguments); } - + doHighLight() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doHighLight(...arguments); } - + unHighLight() { this.text.unHighLight(...arguments); } - + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } } - + blur() { this.editor.blur(); this._showHint(); } - + _showInput() { this.editor.visible(); this.text.invisible(); } - + _showHint() { this.editor.invisible(); this.text.visible(); } - + _setText(v) { this.text.setText(v); this.text.setTitle(v); } - + isValid() { return this.editor.isValid(); } - + setErrorText(text) { this.editor.setErrorText(text); } - + getErrorText() { return this.editor.getErrorText(); } - + isEditing() { return this.editor.isEditing(); } - + getLastValidValue() { return this.editor.getLastValidValue(); } - + getLastChangedValue() { return this.editor.getLastChangedValue(); } - + setValue(k) { this.editor.setValue(k); } - + getValue() { return this.editor.getValue(); } - + getState() { return this.editor.getValue().match(/[^\s]+/g); } - + setState(v) { const o = this.options; const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText; @@ -279,22 +301,28 @@ export class StateEditor extends Widget { this.text.element.removeClass("bi-water-mark"); } else { this._setText(isKey(defaultText) ? defaultText : o.text); - isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + isKey(defaultText) + ? this.text.element.addClass("bi-water-mark") + : this.text.element.removeClass("bi-water-mark"); } - + return; } if (isString(v)) { this._setText(v); // 配置了defaultText才判断标灰，其他情况不标灰 - (isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); - + isKey(defaultText) && defaultText === v + ? this.text.element.addClass("bi-water-mark") + : this.text.element.removeClass("bi-water-mark"); + return; } if (isArray(v)) { if (isEmpty(v)) { this._setText(isKey(defaultText) ? defaultText : o.text); - isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + isKey(defaultText) + ? this.text.element.addClass("bi-water-mark") + : this.text.element.removeClass("bi-water-mark"); } else if (v.length === 1) { this._setText(v[0]); this.text.element.removeClass("bi-water-mark"); @@ -304,11 +332,11 @@ export class StateEditor extends Widget { } } } - + setTipType(v) { this.text.options.tipType = v; } - + getText() { return this.text.getText(); } diff --git a/src/case/editor/editor.state.simple.js b/src/case/editor/editor.state.simple.js index 807a8c158..8175c5083 100644 --- a/src/case/editor/editor.state.simple.js +++ b/src/case/editor/editor.state.simple.js @@ -1,5 +1,22 @@ -import { shortcut, Widget, extend, emptyFn, i18nText, Controller, createWidget, nextTick, isNotNull, isKey, isFunction, isArray, isNumber, isEmpty } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + VerticalLayout, + shortcut, + Widget, + extend, + emptyFn, + i18nText, + Controller, + createWidget, + nextTick, + isNotNull, + isKey, + isFunction, + isArray, + isNumber, + isEmpty +} from "@/core"; /** * 无限制-已选择状态输入框 @@ -9,29 +26,29 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class SimpleStateEditor extends Widget { - static xtype = "bi.simple_state_editor" + static xtype = "bi.simple_state_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-simple-state-editor`, hgap: 4, @@ -56,7 +73,7 @@ export class SimpleStateEditor extends Widget { super._init(...arguments); const o = this.options; this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -74,7 +91,7 @@ export class SimpleStateEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "bi-water-mark", textAlign: "left", text: o.text, @@ -92,15 +109,17 @@ export class SimpleStateEditor extends Widget { }); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], + items: [ + { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }); this.editor.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); @@ -157,7 +176,7 @@ export class SimpleStateEditor extends Widget { this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.vertical", + type: VerticalLayout.xtype, scrolly: false, element: this, items: [this.editor], @@ -271,7 +290,7 @@ export class SimpleStateEditor extends Widget { this._setText(isKey(defaultText) ? defaultText : o.text); this.text.element.addClass("bi-water-mark"); } - + return; } if (!isArray(v) || v.length === 1) { diff --git a/src/case/layer/index.js b/src/case/layer/index.js index 73a7ea575..2737f6b07 100644 --- a/src/case/layer/index.js +++ b/src/case/layer/index.js @@ -1,4 +1,4 @@ -export { MultiPopupView } from "./layer.multipopup"; -export { PopupPanel } from "./layer.panel"; -export { ListPane } from "./pane.list"; -export { Panel } from "./panel"; +export { MultiPopupView } from "./layer.multipopup"; +export { PopupPanel } from "./layer.panel"; +export { ListPane } from "./pane.list"; +export { Panel } from "./panel"; diff --git a/src/case/layer/layer.multipopup.js b/src/case/layer/layer.multipopup.js index d531f57c7..cf0e2a5a5 100644 --- a/src/case/layer/layer.multipopup.js +++ b/src/case/layer/layer.multipopup.js @@ -1,26 +1,27 @@ +import { ButtonGroup, TextButton, PopupView } from "@/base"; +import { CenterLayout, shortcut, extend, i18nText, each, createWidget, createItems } from "@/core"; + /** * 下拉框弹出层的多选版本，toolbar带有若干按钮, zIndex在1000w * @class BI.MultiPopupView * @extends BI.Widget */ -import { shortcut, extend, i18nText, each, createWidget, createItems } from "@/core"; -import { PopupView, ButtonGroup } from "@/base"; @shortcut() export class MultiPopupView extends PopupView { static xtype = "bi.multi_popup_view"; static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { _baseCls: `${conf._baseCls || ""} bi-multi-list-view`, buttons: [i18nText("BI-Basic_OK")], }); } - _createToolBar () { + _createToolBar() { const o = this.options; if (o.buttons.length === 0) { return; @@ -35,20 +36,22 @@ export class MultiPopupView extends PopupView { }); this.buttongroup = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, cls: "list-view-toolbar bi-high-light bi-split-top", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, items: createItems(text, { - type: "bi.text_button", + type: TextButton.xtype, once: false, shadow: true, isShadowShowingOnSelected: true, }), - layouts: [{ - type: "bi.center", - hgap: 0, - vgap: 0, - }], + layouts: [ + { + type: CenterLayout.xtype, + hgap: 0, + vgap: 0, + } + ], }); this.buttongroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { diff --git a/src/case/layer/layer.panel.js b/src/case/layer/layer.panel.js index cc5701e61..386186025 100644 --- a/src/case/layer/layer.panel.js +++ b/src/case/layer/layer.panel.js @@ -1,31 +1,32 @@ +import { IconButton, Label } from "@/base"; +import { HTapeLayout, shortcut, extend, createWidget } from "@/core"; +import { MultiPopupView } from "./layer.multipopup"; + /** * 可以理解为MultiPopupView和Panel两个面板的结合体 * @class BI.PopupPanel * @extends BI.MultiPopupView */ -import { shortcut, extend, createWidget } from "@/core"; -import { IconButton } from "@/base"; -import { MultiPopupView } from "./layer.multipopup"; @shortcut() export class PopupPanel extends MultiPopupView { static xtype = "bi.popup_panel"; static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_CLOSE = "EVENT_CLOSE"; static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-popup-panel`, title: "", }); } - _createTool () { + _createTool() { const o = this.options; const close = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, cls: "close-h-font", width: 25, height: 25, @@ -34,23 +35,26 @@ export class PopupPanel extends MultiPopupView { this.setVisible(false); this.fireEvent(PopupPanel.EVENT_CLOSE); }); - + return createWidget({ - type: "bi.htape", + type: HTapeLayout.xtype, cls: "popup-panel-title bi-header-background", height: 25, - items: [{ - el: { - type: "bi.label", - textAlign: "left", - text: o.title, - height: 25, - lgap: 10, + items: [ + { + el: { + type: Label.xtype, + textAlign: "left", + text: o.title, + height: 25, + lgap: 10, + }, }, - }, { - el: close, - width: 25, - }], + { + el: close, + width: 25, + } + ], }); } } diff --git a/src/case/layer/pane.list.js b/src/case/layer/pane.list.js index 70d79c4f0..d70eaebc3 100644 --- a/src/case/layer/pane.list.js +++ b/src/case/layer/pane.list.js @@ -1,10 +1,3 @@ -/** - * list面板 - * - * Created by GUY on 2015/10/30. - * @class BI.ListPane - * @extends BI.Pane - */ import { shortcut, extend, @@ -27,6 +20,14 @@ import { } from "@/core"; import { Pane, ButtonGroup } from "@/base"; +/** + * list面板 + * + * Created by GUY on 2015/10/30. + * @class BI.ListPane + * @extends BI.Pane + */ + @shortcut() export class ListPane extends Pane { static xtype = "bi.list_pane"; @@ -102,19 +103,31 @@ export class ListPane extends Pane { }); this.check(); - createWidget(extend({ - element: this, - }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(Direction.Top), extend({ - scrolly: true, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - vgap: o.vgap, - hgap: o.hgap, - }, o.logic, { - items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + LogicFactory.createLogicTypeByDirection(Direction.Top), + extend( + { + scrolly: true, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap, + vgap: o.vgap, + hgap: o.hgap, + }, + o.logic, + { + items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group), + } + ) + ) + ) + ); } hasPrev() { @@ -146,9 +159,11 @@ export class ListPane extends Pane { populate(items) { const o = this.options; - if (arguments.length === 0 && (isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法 + if (arguments.length === 0 && isFunction(this.button_group.attr("itemsCreator"))) { + // 接管loader的populate方法 this.button_group.attr("itemsCreator").apply(this, [ - { times: 1 }, (...args) => { + { times: 1 }, + (...args) => { if (args.length === 0) { throw new Error("参数不能为空"); } @@ -229,4 +244,3 @@ export class ListPane extends Pane { return this.button_group.getNodeByValue(value); } } - diff --git a/src/case/layer/panel.js b/src/case/layer/panel.js index de18dc35f..2ce1be1ac 100644 --- a/src/case/layer/panel.js +++ b/src/case/layer/panel.js @@ -1,15 +1,21 @@ - -import { shortcut, Widget, extend, toPix, Controller, createWidget } from "@/core"; -import { ButtonGroup } from "@/base"; +import { + VerticalFillLayout, + CenterAdaptLayout, + LeftRightVerticalAdaptLayout, + shortcut, + Widget, + extend, + toPix, + Controller, + createWidget +} from "@/core"; +import { Label, ButtonGroup } from "@/base"; @shortcut() export class Panel extends Widget { - static xtype = "bi.panel" - - - - static EVENT_CHANGE = "EVENT_CHANGE" + static xtype = "bi.panel"; + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -26,7 +32,7 @@ export class Panel extends Widget { render() { return { - type: "bi.vertical_fill", + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], items: [this._createTitle(), this.options.el], }; @@ -35,19 +41,21 @@ export class Panel extends Widget { _createTitle() { const o = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, cls: "panel-title-text", text: o.title, height: o.titleHeight, }); this.button_group = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, items: o.titleButtons, - layouts: [{ - type: "bi.center_adapt", - lgap: 10, - }], + layouts: [ + { + type: CenterAdaptLayout.xtype, + lgap: 10, + } + ], }); this.button_group.on(Controller.EVENT_CHANGE, (...args) => { @@ -60,7 +68,7 @@ export class Panel extends Widget { return { // el: { - type: "bi.left_right_vertical_adapt", + type: LeftRightVerticalAdaptLayout.xtype, cls: "panel-title bi-header-background bi-border-bottom", height: toPix(o.titleHeight, 1), items: { diff --git a/src/case/linearsegment/button.linear.segment.js b/src/case/linearsegment/button.linear.segment.js index 11c2b20b5..44316cb76 100644 --- a/src/case/linearsegment/button.linear.segment.js +++ b/src/case/linearsegment/button.linear.segment.js @@ -1,47 +1,55 @@ - -import { shortcut, toPix } from "@/core"; -import { BasicButton } from "@/base"; +import { Label, BasicButton } from "@/base"; +import { AbsoluteLayout, Layout, shortcut, toPix } from "@/core"; @shortcut() export class LinearSegmentButton extends BasicButton { - static xtype = "bi.linear_segment_button" - - props = { extraCls:"bi-line-segment-button bi-list-item-effect", once:true, readonly:true, hgap:10, height:24 }; - + static xtype = "bi.linear_segment_button"; + props = { + extraCls: "bi-line-segment-button bi-list-item-effect", + once: true, + readonly: true, + hgap: 10, + height: 24, + }; - render () { + render() { const o = this.options; - return [{ - type: "bi.label", - text: o.text, - height: o.height, - textHeight: toPix(o.height, 2), - value: o.value, - hgap: o.hgap, - ref : _ref => { - this.text = _ref; - }, - }, { - type: "bi.absolute", - items: [{ - el: { - type: "bi.layout", - cls: "line-segment-button-line", - height: 2, - ref : _ref => { - this.line = _ref; - }, + return [ + { + type: Label.xtype, + text: o.text, + height: o.height, + textHeight: toPix(o.height, 2), + value: o.value, + hgap: o.hgap, + ref: _ref => { + this.text = _ref; }, - left: 0, - right: 0, - bottom: 0, - }], - }]; + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "line-segment-button-line", + height: 2, + ref: _ref => { + this.line = _ref; + }, + }, + left: 0, + right: 0, + bottom: 0, + } + ], + } + ]; } - setSelected (v) { + setSelected(v) { super.setSelected(...arguments); if (v) { this.line.element.addClass("bi-high-light-background"); @@ -50,7 +58,7 @@ export class LinearSegmentButton extends BasicButton { } } - setText (text) { + setText(text) { this.text.setText(text); } } diff --git a/src/case/linearsegment/index.js b/src/case/linearsegment/index.js index bf437ca2b..339335d84 100644 --- a/src/case/linearsegment/index.js +++ b/src/case/linearsegment/index.js @@ -1,2 +1,2 @@ -export { LinearSegmentButton } from "./button.linear.segment"; -export { LinearSegment } from "./linear.segment"; +export { LinearSegmentButton } from "./button.linear.segment"; +export { LinearSegment } from "./linear.segment"; diff --git a/src/case/linearsegment/linear.segment.js b/src/case/linearsegment/linear.segment.js index c44265704..98c5a5bb8 100644 --- a/src/case/linearsegment/linear.segment.js +++ b/src/case/linearsegment/linear.segment.js @@ -1,62 +1,70 @@ - -import { shortcut, Widget, createItems, makeArrayByArray } from "@/core"; +import { ButtonGroup } from "@/base"; +import { LinearSegmentButton } from "./button.linear.segment"; +import { TableLayout, shortcut, Widget, createItems, makeArrayByArray } from "@/core"; @shortcut() export class LinearSegment extends Widget { - static xtype = "bi.linear_segment" - - props = { baseCls:"bi-linear-segment", items:[], height:30 }; + static xtype = "bi.linear_segment"; + props = { baseCls: "bi-linear-segment", items: [], height: 30 }; - - render () { + render() { const o = this.options; - + return { - type: "bi.button_group", - items: [createItems(o.items, { - type: "bi.linear_segment_button", - height: o.height, - })], - layouts: [{ - type: "bi.table", - columnSize: makeArrayByArray(o.items, "fill"), - }], + type: ButtonGroup.xtype, + items: [ + createItems(o.items, { + type: LinearSegmentButton.xtype, + height: o.height, + }) + ], + layouts: [ + { + type: TableLayout.xtype, + columnSize: makeArrayByArray(o.items, "fill"), + } + ], value: o.value, - listeners: [{ - eventName: "__EVENT_CHANGE__", - action: (...args) => { - this.fireEvent("__EVENT_CHANGE__", ...args); - }, - }, { - eventName: "EVENT_CHANGE", - action: () => { - this.fireEvent("EVENT_CHANGE"); + listeners: [ + { + eventName: "__EVENT_CHANGE__", + action: (...args) => { + this.fireEvent("__EVENT_CHANGE__", ...args); + }, }, - }], + { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + } + ], ref: _ref => { this.buttonGroup = _ref; }, }; } - setValue (v) { + setValue(v) { this.buttonGroup.setValue(v); } - setEnabledValue (v) { + setEnabledValue(v) { this.buttonGroup.setEnabledValue(v); } - getValue () { + getValue() { return this.buttonGroup.getValue(); } - populate (buttons) { + populate(buttons) { const o = this.options; - this.buttonGroup.populate([createItems(buttons, { - type: "bi.linear_segment_button", - height: o.height, - })]); + this.buttonGroup.populate([ + createItems(buttons, { + type: LinearSegmentButton.xtype, + height: o.height, + }) + ]); } } diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js index 9c5896a30..4301aff57 100644 --- a/src/case/list/list.select.js +++ b/src/case/list/list.select.js @@ -1,5 +1,3 @@ -/* eslint-disable no-mixed-spaces-and-tabs */ - import { shortcut, Widget, @@ -21,6 +19,8 @@ import { ButtonGroup } from "@/base"; import { MultiSelectBar } from "../toolbar/toolbar.multiselect"; import { ListPane } from "../layer/pane.list"; +/* eslint-disable no-mixed-spaces-and-tabs */ + @shortcut() export class SelectList extends Widget { static xtype = "bi.select_list"; @@ -94,13 +94,25 @@ export class SelectList extends Widget { this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - createWidget(extend({ - element: this, - }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(o.direction), extend({ - scrolly: true, - }, o.logic, { - items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + LogicFactory.createLogicTypeByDirection(o.direction), + extend( + { + scrolly: true, + }, + o.logic, + { + items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list), + } + ) + ) + ) + ); if (o.items.length <= 0) { this.toolbar.setVisible(false); @@ -214,8 +226,9 @@ export class SelectList extends Widget { resetHeight(h) { const toolHeight = (this.toolbar.element.outerHeight() || 25) * (this.toolbar.isVisible() ? 1 : 0); - this.list.resetHeight ? this.list.resetHeight(h - toolHeight) : - this.list.element.css({ "max-height": pixFormat(h - toolHeight) }); + this.list.resetHeight + ? this.list.resetHeight(h - toolHeight) + : this.list.element.css({ "max-height": pixFormat(h - toolHeight) }); } setNotSelectedValue() { diff --git a/src/case/loader/loader.lazy.js b/src/case/loader/loader.lazy.js index 54f983ee6..eddfa82c6 100644 --- a/src/case/loader/loader.lazy.js +++ b/src/case/loader/loader.lazy.js @@ -1,15 +1,15 @@ -import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core"; import { Loader } from "@/base"; +import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core"; @shortcut() export class LazyLoader extends Widget { - static xtype = "bi.lazy_loader" + static xtype = "bi.lazy_loader"; _const = { PAGE: 100, }; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -24,7 +24,7 @@ export class LazyLoader extends Widget { super._init(...arguments); const all = o.items.length; this.loader = createWidget({ - type: "bi.loader", + type: Loader.xtype, element: this, // 下面是button_group的属性 el: o.el, @@ -44,7 +44,7 @@ export class LazyLoader extends Widget { const lastNum = o.items.length - this._const.PAGE * (options.times - 1); const lastItems = takeRight(o.items, lastNum); const nextItems = take(lastItems, this._const.PAGE); - + return nextItems; } diff --git a/src/case/loader/loader.list.js b/src/case/loader/loader.list.js index a8aa011e3..3bb61f829 100644 --- a/src/case/loader/loader.list.js +++ b/src/case/loader/loader.list.js @@ -1,4 +1,23 @@ -import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, nextTick, bind, isEmpty, isNumber, isObject, isFunction, each, isNotEmptyArray, DOM } from "@/core"; +import { ButtonGroup, LoadingBar } from "@/base"; +import { + VerticalLayout, + shortcut, + Widget, + extend, + emptyFn, + Controller, + createWidget, + Events, + nextTick, + bind, + isEmpty, + isNumber, + isObject, + isFunction, + each, + isNotEmptyArray, + DOM +} from "@/core"; /** * 恶心的加载控件， 为解决排序问题引入的控件 @@ -9,9 +28,9 @@ import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, ne */ @shortcut() export class ListLoader extends Widget { - static xtype = "bi.list_loader" + static xtype = "bi.list_loader"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -19,7 +38,7 @@ export class ListLoader extends Widget { isDefaultInit: true, // 是否默认初始化数据 // 下面是button_group的属性 el: { - type: "bi.button_group", + type: ButtonGroup.xtype, }, items: [], itemsCreator: emptyFn, @@ -34,12 +53,15 @@ export class ListLoader extends Widget { _nextLoad() { const o = this.options; this.next.setLoading(); - o.itemsCreator.apply(this, [{ - times: ++this.times, - }, (...args) => { - this.next.setLoaded(); - this.addItems(...args); - }]); + o.itemsCreator.apply(this, [ + { + times: ++this.times, + }, + (...args) => { + this.next.setLoaded(); + this.addItems(...args); + } + ]); } _init() { @@ -50,14 +72,16 @@ export class ListLoader extends Widget { } this.button_group = createWidget(o.el, { - type: "bi.button_group", + type: ButtonGroup.xtype, element: this, chooseType: 0, items: o.items, behaviors: {}, - layouts: [{ - type: "bi.vertical", - }], + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }); this.button_group.on(Controller.EVENT_CHANGE, (...args) => { const [type, , obj] = args; @@ -68,9 +92,14 @@ export class ListLoader extends Widget { }); if (o.next !== false) { - this.next = createWidget(extend({ - type: "bi.loading_bar", - }, o.next)); + this.next = createWidget( + extend( + { + type: LoadingBar.xtype, + }, + o.next + ) + ); this.next.on(Controller.EVENT_CHANGE, type => { if (type === Events.CLICK) { this._nextLoad(); @@ -79,14 +108,18 @@ export class ListLoader extends Widget { } createWidget({ - type: "bi.vertical", + type: VerticalLayout.xtype, element: this, items: [this.next], }); - o.isDefaultInit && isEmpty(o.items) && nextTick(bind(function () { - this.populate(); - }, this)); + o.isDefaultInit && + isEmpty(o.items) && + nextTick( + bind(function () { + this.populate(); + }, this) + ); if (isNotEmptyArray(o.items)) { this.populate(o.items); } @@ -97,11 +130,13 @@ export class ListLoader extends Widget { if (isNumber(o.count)) { return this.count < o.count; } - - return !!o.hasNext.apply(this, [{ - times: this.times, - count: this.count, - }]); + + return !!o.hasNext.apply(this, [ + { + times: this.times, + count: this.count, + } + ]); } addItems(items) { @@ -120,17 +155,20 @@ export class ListLoader extends Widget { populate(items) { const o = this.options; - if (arguments.length === 0 && (isFunction(o.itemsCreator))) { - o.itemsCreator.apply(this, [{ - times: 1, - }, (...args) => { - if (args.length === 0) { - throw new Error("参数不能为空"); + if (arguments.length === 0 && isFunction(o.itemsCreator)) { + o.itemsCreator.apply(this, [ + { + times: 1, + }, + (...args) => { + if (args.length === 0) { + throw new Error("参数不能为空"); + } + this.populate(...args); + o.onLoaded(); } - this.populate(...args); - o.onLoaded(); - }]); - + ]); + return; } this.options.items = items; diff --git a/src/case/loader/sort.list.js b/src/case/loader/sort.list.js index b3d147fe3..617aac682 100644 --- a/src/case/loader/sort.list.js +++ b/src/case/loader/sort.list.js @@ -1,4 +1,6 @@ -import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core"; +import { ButtonGroup } from "@/base"; +import { ListLoader } from "./loader.list"; +import { Layout, shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core"; /** * Created by GUY on 2016/4/29. @@ -8,9 +10,9 @@ import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, ea */ @shortcut() export class SortList extends Widget { - static xtype = "bi.sort_list" + static xtype = "bi.sort_list"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -18,7 +20,7 @@ export class SortList extends Widget { isDefaultInit: true, // 是否默认初始化数据 // 下面是button_group的属性 el: { - type: "bi.button_group", + type: ButtonGroup.xtype, }, items: [], itemsCreator: emptyFn, @@ -36,12 +38,12 @@ export class SortList extends Widget { super._init(...arguments); const o = this.options; this.loader = createWidget({ - type: "bi.list_loader", + type: ListLoader.xtype, element: this, isDefaultInit: o.isDefaultInit, el: o.el, items: this._formatItems(o.items), - itemsCreator (op, callback) { + itemsCreator(op, callback) { o.itemsCreator(op, items => { callback(this._formatItems(items)); }); @@ -66,9 +68,9 @@ export class SortList extends Widget { cursor: o.cursor || "drag", tolerance: o.tolerance || "intersect", placeholder: { - element ($currentItem) { + element($currentItem) { const holder = createWidget({ - type: "bi.layout", + type: Layout.xtype, cls: "bi-sortable-holder", height: $currentItem.outerHeight(), }); @@ -79,22 +81,16 @@ export class SortList extends Widget { "margin-bottom": $currentItem.css("margin-bottom"), margin: $currentItem.css("margin"), }); - - return holder.element; - }, - update () { + return holder.element; }, + update() {}, }, - start (event, ui) { - - }, + start(event, ui) {}, stop: (event, ui) => { this.fireEvent(SortList.EVENT_CHANGE); }, - over (event, ui) { - - }, + over(event, ui) {}, }); } @@ -106,7 +102,7 @@ export class SortList extends Widget { sorted: item.value, }; }); - + return items; } diff --git a/src/case/pager/index.js b/src/case/pager/index.js index ec62a806d..222ce3940 100644 --- a/src/case/pager/index.js +++ b/src/case/pager/index.js @@ -1,3 +1,3 @@ -export { AllCountPager } from "./pager.all.count"; -export { DetailPager } from "./pager.detail"; -export { DirectionPager } from "./pager.direction"; +export { AllCountPager } from "./pager.all.count"; +export { DetailPager } from "./pager.detail"; +export { DirectionPager } from "./pager.direction"; diff --git a/src/case/pager/pager.all.count.js b/src/case/pager/pager.all.count.js index 2dfdc0c3c..dcfa40002 100644 --- a/src/case/pager/pager.all.count.js +++ b/src/case/pager/pager.all.count.js @@ -1,15 +1,31 @@ +import { Pager, IconButton, Label } from "@/base"; +import { + HorizontalLayout, + VerticalAdaptLayout, + FloatLeftLayout, + shortcut, + Widget, + extend, + isPositiveInteger, + createWidget, + parseInt, + HorizontalAlign, + isNotEmptyObject +} from "@/core"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small"; + /** * 有总页数和总行数的分页控件 * Created by Young's on 2016/10/13. */ -import { shortcut, Widget, extend, isPositiveInteger, createWidget, parseInt, HorizontalAlign, isNotEmptyObject } from "@/core"; -// import { TextEditor } from "@/widget/editor/editor.text"; -import { Pager } from "@/base"; + +// + @shortcut() export class AllCountPager extends Widget { static xtype = "bi.all_count_pager"; static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { extraCls: "bi-all-count-pager", pagerDirection: "vertical", // 翻页按钮方向，可选值：vertical/horizontal @@ -22,13 +38,14 @@ export class AllCountPager extends Widget { showRowInfo: true, }); } - _init () { + _init() { super._init(...arguments); - const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, pagerIconCls = this._getPagerIconCls(); + const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, + pagerIconCls = this._getPagerIconCls(); this.editor = createWidget({ - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "pager-editor bi-border-radius", - validationChecker (v) { + validationChecker(v) { return (pages === 0 && v === "0") || isPositiveInteger(v); }, hgap: 4, @@ -41,12 +58,14 @@ export class AllCountPager extends Widget { }); this.pager = createWidget({ - type: "bi.pager", + type: Pager.xtype, width: 58, - layouts: [{ - type: "bi.horizontal", - lgap: 5, - }], + layouts: [ + { + type: HorizontalLayout.xtype, + lgap: 5, + } + ], dynamicShow: false, pages, @@ -56,7 +75,7 @@ export class AllCountPager extends Widget { first: false, last: false, prev: { - type: "bi.icon_button", + type: IconButton.xtype, value: "prev", title: BI.i18nText("BI-Previous_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"), @@ -65,7 +84,7 @@ export class AllCountPager extends Widget { cls: `bi-border bi-border-radius all-pager-prev bi-list-item-select2 ${pagerIconCls.preCls}`, }, next: { - type: "bi.icon_button", + type: IconButton.xtype, value: "next", title: BI.i18nText("BI-Next_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), @@ -94,7 +113,7 @@ export class AllCountPager extends Widget { }); this.allPages = createWidget({ - type: "bi.label", + type: Label.xtype, title: pages, height, text: `/${pages}`, @@ -102,24 +121,25 @@ export class AllCountPager extends Widget { invisible: pages <= 1, }); - createWidget(showRowCount ? { - type: "bi.vertical_adapt", - element: this, - scrollx: false, - columnSize: ["fill", ""], - horizontalAlign: HorizontalAlign.Right, - items: [ - this._getRowCountObject(), - this.editor, this.allPages, this.pager - ], - } : { - type: "bi.vertical_adapt", - element: this, - items: [this.editor, this.allPages, this.pager], - }); + createWidget( + showRowCount + ? { + type: VerticalAdaptLayout.xtype, + element: this, + scrollx: false, + columnSize: ["fill", ""], + horizontalAlign: HorizontalAlign.Right, + items: [this._getRowCountObject(), this.editor, this.allPages, this.pager], + } + : { + type: VerticalAdaptLayout.xtype, + element: this, + items: [this.editor, this.allPages, this.pager], + } + ); } - _getPagerIconCls () { + _getPagerIconCls() { const { pagerDirection } = this.options; switch (pagerDirection) { case "horizontal": @@ -140,41 +160,46 @@ export class AllCountPager extends Widget { const { height, count, rowInfoObject } = this.options; return { - type: "bi.left", + type: FloatLeftLayout.xtype, height, scrollable: false, - ref: _ref => { + ref: _ref => { this.rowCountObject = _ref; }, - items: [{ - type: "bi.label", - height, - text: BI.i18nText("BI-Basic_Total"), - ref: _ref => { - this.prevText = _ref; - }, - }, { - el: { - type: "bi.label", + items: [ + { + type: Label.xtype, + height, + text: BI.i18nText("BI-Basic_Total"), ref: _ref => { - this.rowCount = _ref; + this.prevText = _ref; }, - cls: "row-count", + }, + { + el: { + type: Label.xtype, + ref: _ref => { + this.rowCount = _ref; + }, + cls: "row-count", + height, + text: count, + title: count, + }, + hgap: 5, + }, + { + type: Label.xtype, height, - text: count, - title: count, + text: BI.i18nText("BI-Tiao_Data"), + textAlign: "left", }, - hgap: 5, - }, { - type: "bi.label", - height, - text: BI.i18nText("BI-Tiao_Data"), - textAlign: "left", - }, isNotEmptyObject(rowInfoObject) ? rowInfoObject : null], + isNotEmptyObject(rowInfoObject) ? rowInfoObject : null + ], }; } - setAllPages (v) { + setAllPages(v) { this.allPages.setText(`/${v}`); this.allPages.setTitle(v); this.options.pages = v; @@ -183,55 +208,55 @@ export class AllCountPager extends Widget { this.setPagerVisible(v > 1); } - setShowRowInfo (b) { + setShowRowInfo(b) { this.options.showRowInfo = b; this.rowCountObject.setVisible(b); } - setValue (v) { + setValue(v) { this.pager.setValue(v); } - setVPage (v) { + setVPage(v) { this.pager.setValue(v); } - setCount (count) { + setCount(count) { if (this.options.showRowCount) { this.rowCount.setText(count); this.rowCount.setTitle(count); } } - setCountPrevText (text) { + setCountPrevText(text) { if (this.options.showRowCount) { this.prevText.setText(text); } } - getCurrentPage () { + getCurrentPage() { return this.pager.getCurrentPage(); } - hasPrev () { + hasPrev() { return this.pager.hasPrev(); } - hasNext () { + hasNext() { return this.pager.hasNext(); } - isShowPager () { + isShowPager() { return this.options.showRowInfo || this.options.pages > 1; } - setPagerVisible (b) { + setPagerVisible(b) { this.editor.setVisible(b); this.allPages.setVisible(b); this.pager.setVisible(b); } - populate () { + populate() { this.pager.populate(); this.setPagerVisible(this.options.pages > 1); } diff --git a/src/case/pager/pager.detail.js b/src/case/pager/pager.detail.js index 37e56edc5..72ca03d49 100644 --- a/src/case/pager/pager.detail.js +++ b/src/case/pager/pager.detail.js @@ -1,3 +1,21 @@ +import { + HorizontalLayout, + shortcut, + Widget, + extend, + emptyFn, + result, + debounce, + isKey, + createWidget, + createItems, + Controller, + Events, + MIN, + MAX +} from "@/core"; +import { Label, ButtonGroup } from "@/base"; + /** * 分页控件 * @@ -6,26 +24,27 @@ * @extends BI.Widget */ -import { shortcut, Widget, extend, emptyFn, result, debounce, isKey, createWidget, createItems, Controller, Events, MIN, MAX } from "@/core"; @shortcut() export class DetailPager extends Widget { static xtype = "bi.detail_pager"; static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-detail-pager", behaviors: {}, - layouts: [{ - type: "bi.horizontal", - }], + layouts: [ + { + type: HorizontalLayout.xtype, + } + ], dynamicShow: true, // 是否动态显示上一页、下一页、首页、尾页， 若为false，则指对其设置使能状态 // dynamicShow为false时以下两个有用 dynamicShowFirstLast: false, // 是否动态显示首页、尾页 dynamicShowPrevNext: false, // 是否动态显示上一页、下一页 pages: false, // 总页数 - curr () { + curr() { return 1; }, // 初始化当前页 groups: 0, // 连续显示分页数 @@ -37,14 +56,15 @@ export class DetailPager extends Widget { next: "下一页", firstPage: 1, - lastPage () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 + lastPage() { + // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 return 1; }, hasPrev: emptyFn, // pages不可用时有效 hasNext: emptyFn, // pages不可用时有效 }); } - _init () { + _init() { super._init(...arguments); this.currPage = result(this.options, "curr"); // 翻页太灵敏 @@ -54,9 +74,12 @@ export class DetailPager extends Widget { }, 300); this._populate(); } - _populate () { - const o = this.options, view = [], dict = {}; - const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options; + _populate() { + const o = this.options, + view = [], + dict = {}; + const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = + this.options; this.empty(); const pages = result(o, "pages"); const curr = result(this, "currPage"); @@ -75,7 +98,7 @@ export class DetailPager extends Widget { } // 计算当前组 - dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups)); + dict.index = Math.ceil((curr + (groups > 1 && groups !== pages ? 1 : 0)) / (groups === 0 ? 1 : groups)); // 当前页非首页，则输出上一页 if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) { @@ -86,9 +109,14 @@ export class DetailPager extends Widget { disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), }); } else { - view.push(extend({ - disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), - }, prev)); + view.push( + extend( + { + disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), + }, + prev + ) + ); } } @@ -101,7 +129,7 @@ export class DetailPager extends Widget { }); if (dict.index > 1 && groups !== 0) { view.push({ - type: "bi.label", + type: Label.xtype, cls: "page-ellipsis", text: "\u2026", }); @@ -111,16 +139,21 @@ export class DetailPager extends Widget { // 输出当前页组 dict.poor = Math.floor((groups - 1) / 2); dict.start = dict.index > 1 ? curr - dict.poor : 1; - dict.end = dict.index > 1 ? (function () { - const max = curr + (groups - dict.poor - 1); - - return max > pages ? pages : max; - }()) : groups; - if (dict.end - dict.start < groups - 1) { // 最后一组状态 + dict.end = + dict.index > 1 + ? (function () { + const max = curr + (groups - dict.poor - 1); + + return max > pages ? pages : max; + }()) + : groups; + if (dict.end - dict.start < groups - 1) { + // 最后一组状态 dict.start = dict.end - groups + 1; } - let s = dict.start, e = dict.end; - if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) { + let s = dict.start, + e = dict.end; + if (first && last && dict.index > 1 && groups !== 0 && pages > groups && dict.end < pages && groups !== 0) { s++; e--; } @@ -143,7 +176,7 @@ export class DetailPager extends Widget { if (((!dynamicShow && !dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) { if (pages > groups && dict.end < pages && groups !== 0) { view.push({ - type: "bi.label", + type: Label.xtype, cls: "page-ellipsis", text: "\u2026", }); @@ -157,28 +190,32 @@ export class DetailPager extends Widget { // 当前页不为尾页时，输出下一页 dict.flow = !prev && groups === 0; - if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) { - view.push((function () { - if (isKey(next)) { - if (pages === false) { - return { text: next, value: "next", disabled: hasNext(curr) === false }; + if ((!dynamicShow && !dynamicShowPrevNext && next) || (curr !== pages && next) || dict.flow) { + view.push( + (function () { + if (isKey(next)) { + if (pages === false) { + return { text: next, value: "next", disabled: hasNext(curr) === false }; + } + + return dict.flow && curr === pages + ? { text: next, value: "next", disabled: true } + : { text: next, value: "next", disabled: !((curr !== pages && next) || dict.flow) }; } - - return (dict.flow && curr === pages) - ? - { text: next, value: "next", disabled: true } - : - { text: next, value: "next", disabled: !(curr !== pages && next || dict.flow) }; - } - - return extend({ - disabled: pages === false ? hasNext(curr) === false : !(curr !== pages && next || dict.flow), - }, next); - }())); + + return extend( + { + disabled: + pages === false ? hasNext(curr) === false : !((curr !== pages && next) || dict.flow), + }, + next + ); + })() + ); } this.button_group = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, element: this, items: createItems(view, { cls: "page-item bi-border bi-list-item-active", @@ -212,10 +249,12 @@ export class DetailPager extends Widget { this.currPage = v; break; } - jump.apply(this, [{ - pages, - curr: this.currPage, - }]); + jump.apply(this, [ + { + pages, + curr: this.currPage, + } + ]); this._populate(); this.fireEvent(DetailPager.EVENT_CHANGE, obj); } @@ -224,32 +263,32 @@ export class DetailPager extends Widget { this.fireEvent(DetailPager.EVENT_AFTER_POPULATE); } - getCurrentPage () { + getCurrentPage() { return this.currPage; } - setAllPages (pages) { + setAllPages(pages) { this.options.pages = pages; this._populate(); } - hasPrev (v) { + hasPrev(v) { v || (v = 1); const { hasPrev } = this.options; const pages = this.options.pages; - + return pages === false ? hasPrev(v) : v > 1; } - hasNext (v) { + hasNext(v) { v || (v = 1); const { hasNext } = this.options; const pages = this.options.pages; - + return pages === false ? hasNext(v) : v < pages; } - setValue (v) { + setValue(v) { const o = this.options; const { pages } = this.options; v = v || 0; @@ -257,7 +296,8 @@ export class DetailPager extends Widget { if (pages === false) { const lastPage = result(o, "lastPage"); let firstPage = 1; - this.currPage = v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), (v < firstPage ? firstPage : v)); + this.currPage = + v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), v < firstPage ? firstPage : v); } else { v = v > pages ? pages : v; this.currPage = v; @@ -265,7 +305,7 @@ export class DetailPager extends Widget { this._populate(); } - getValue () { + getValue() { const val = this.button_group.getValue()[0]; switch (val) { case "prev": @@ -276,19 +316,19 @@ export class DetailPager extends Widget { return MIN; case "last": return MAX; - default : + default: return val; } } - attr (key, value) { + attr(key, value) { super.attr(...arguments); if (key === "curr") { this.currPage = result(this.options, "curr"); } } - populate () { + populate() { this._populate(); } } diff --git a/src/case/pager/pager.direction.js b/src/case/pager/pager.direction.js index 512b2cc20..b114beb4b 100644 --- a/src/case/pager/pager.direction.js +++ b/src/case/pager/pager.direction.js @@ -1,3 +1,6 @@ +import { AbsoluteLayout, HorizontalLayout, shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; +import { Label, Pager, IconButton } from "@/base"; + /** * 显示页码的分页控件 * @@ -6,14 +9,12 @@ * @extends BI.Widget */ -import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; -import { Pager } from "@/base"; @shortcut() export class DirectionPager extends Widget { static EVENT_CHANGE = "EVENT_CHANGE"; static xtype = "bi.direction_pager"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-direction-pager", height: 24, @@ -37,38 +38,43 @@ export class DirectionPager extends Widget { }, }); } - _init () { + _init() { super._init(...arguments); this._createVPager(); this._createHPager(); this.layout = createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, scrollable: false, element: this, - items: [{ - el: this.vpager, - top: 0, - right: 86, - }, { - el: this.vlabel, - top: 0, - right: 110, - }, { - el: this.hpager, - top: 0, - right: 0, - }, { - el: this.hlabel, - top: 0, - right: 24, - }], + items: [ + { + el: this.vpager, + top: 0, + right: 86, + }, + { + el: this.vlabel, + top: 0, + right: 110, + }, + { + el: this.hpager, + top: 0, + right: 0, + }, + { + el: this.hlabel, + top: 0, + right: 24, + } + ], }); } - _createVPager () { + _createVPager() { const v = this.options.vertical; this.vlabel = createWidget({ - type: "bi.label", + type: Label.xtype, width: 24, height: 24, value: v.curr, @@ -76,13 +82,15 @@ export class DirectionPager extends Widget { invisible: true, }); this.vpager = createWidget({ - type: "bi.pager", + type: Pager.xtype, width: 72, - layouts: [{ - type: "bi.horizontal", - scrollx: false, - rgap: 24, - }], + layouts: [ + { + type: HorizontalLayout.xtype, + scrollx: false, + rgap: 24, + } + ], invisible: true, dynamicShow: false, @@ -93,7 +101,7 @@ export class DirectionPager extends Widget { first: false, last: false, prev: { - type: "bi.icon_button", + type: IconButton.xtype, value: "prev", title: BI.i18nText("BI-Up_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"), @@ -102,7 +110,7 @@ export class DirectionPager extends Widget { cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2", }, next: { - type: "bi.icon_button", + type: IconButton.xtype, value: "next", title: BI.i18nText("BI-Down_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), @@ -125,10 +133,10 @@ export class DirectionPager extends Widget { this.vlabel.setTitle(this.vpager.getCurrentPage()); }); } - _createHPager () { + _createHPager() { const h = this.options.horizontal; this.hlabel = createWidget({ - type: "bi.label", + type: Label.xtype, width: 24, height: 24, value: h.curr, @@ -136,13 +144,15 @@ export class DirectionPager extends Widget { invisible: true, }); this.hpager = createWidget({ - type: "bi.pager", + type: Pager.xtype, width: 72, - layouts: [{ - type: "bi.horizontal", - scrollx: false, - rgap: 24, - }], + layouts: [ + { + type: HorizontalLayout.xtype, + scrollx: false, + rgap: 24, + } + ], invisible: true, dynamicShow: false, @@ -153,7 +163,7 @@ export class DirectionPager extends Widget { first: false, last: false, prev: { - type: "bi.icon_button", + type: IconButton.xtype, value: "prev", title: BI.i18nText("BI-Left_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"), @@ -162,7 +172,7 @@ export class DirectionPager extends Widget { cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2", }, next: { - type: "bi.icon_button", + type: IconButton.xtype, value: "next", title: BI.i18nText("BI-Right_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), @@ -186,56 +196,57 @@ export class DirectionPager extends Widget { }); } - getVPage () { + getVPage() { return this.vpager.getCurrentPage(); } - getHPage () { + getHPage() { return this.hpager.getCurrentPage(); } - setVPage (v) { + setVPage(v) { this.vpager.setValue(v); this.vlabel.setValue(v); this.vlabel.setTitle(v); } - setHPage (v) { + setHPage(v) { this.hpager.setValue(v); this.hlabel.setValue(v); this.hlabel.setTitle(v); } - hasVNext () { + hasVNext() { return this.vpager.hasNext(); } - hasHNext () { + hasHNext() { return this.hpager.hasNext(); } - hasVPrev () { + hasVPrev() { return this.vpager.hasPrev(); } - hasHPrev () { + hasHPrev() { return this.hpager.hasPrev(); } - setHPagerVisible (b) { + setHPagerVisible(b) { this.hpager.setVisible(b); this.hlabel.setVisible(b); } - setVPagerVisible (b) { + setVPagerVisible(b) { this.vpager.setVisible(b); this.vlabel.setVisible(b); } - populate () { + populate() { this.vpager.populate(); this.hpager.populate(); - let vShow = false, hShow = false; + let vShow = false, + hShow = false; if (!this.hasHNext() && !this.hasHPrev()) { this.setHPagerVisible(false); } else { @@ -268,7 +279,7 @@ export class DirectionPager extends Widget { this.layout.resize(); } - clear () { + clear() { this.vpager.attr("curr", 1); this.hpager.attr("curr", 1); } diff --git a/src/case/segment/button.segment.js b/src/case/segment/button.segment.js index 9508a686c..160fb645d 100644 --- a/src/case/segment/button.segment.js +++ b/src/case/segment/button.segment.js @@ -1,5 +1,5 @@ +import { Label, BasicButton } from "@/base"; import { shortcut, extend, createWidget } from "@/core"; -import { BasicButton } from "@/base"; /** * 分段控件使用的button @@ -10,11 +10,11 @@ import { BasicButton } from "@/base"; */ @shortcut() export class SegmentButton extends BasicButton { - static xtype = "bi.segment_button" + static xtype = "bi.segment_button"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-segment-button bi-list-item-select bi-card`, shadow: true, @@ -27,7 +27,7 @@ export class SegmentButton extends BasicButton { super._init(...arguments); const opts = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, element: this, textHeight: opts.height, whiteSpace: opts.whiteSpace, diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js index ac16eba20..0adc0866a 100644 --- a/src/case/segment/segment.js +++ b/src/case/segment/segment.js @@ -1,5 +1,16 @@ -import { shortcut, Widget, extend, toPix, Controller, createWidget, createItems, makeArrayByArray } from "@/core"; import { ButtonGroup } from "@/base"; +import { SegmentButton } from "./button.segment"; +import { + TableLayout, + shortcut, + Widget, + extend, + toPix, + Controller, + createWidget, + createItems, + makeArrayByArray +} from "@/core"; /** * 单选按钮组 @@ -10,9 +21,9 @@ import { ButtonGroup } from "@/base"; */ @shortcut() export class Segment extends Widget { - static xtype = "bi.segment" + static xtype = "bi.segment"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -27,17 +38,21 @@ export class Segment extends Widget { const o = this.options; this.buttonGroup = createWidget({ element: this, - type: "bi.button_group", + type: ButtonGroup.xtype, value: o.value, - items: [createItems(o.items, { - type: "bi.segment_button", - height: toPix(o.height, 2), - whiteSpace: o.whiteSpace, - })], - layouts: [{ - type: "bi.table", - columnSize: makeArrayByArray(o.items, "fill"), - }], + items: [ + createItems(o.items, { + type: SegmentButton.xtype, + height: toPix(o.height, 2), + whiteSpace: o.whiteSpace, + }) + ], + layouts: [ + { + type: TableLayout.xtype, + columnSize: makeArrayByArray(o.items, "fill"), + } + ], }); this.buttonGroup.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); @@ -70,10 +85,12 @@ export class Segment extends Widget { populate(buttons) { const o = this.options; - this.buttonGroup.populate([createItems(buttons, { - type: "bi.segment_button", - height: toPix(o.height, 2), - whiteSpace: o.whiteSpace, - })]); + this.buttonGroup.populate([ + createItems(buttons, { + type: SegmentButton.xtype, + height: toPix(o.height, 2), + whiteSpace: o.whiteSpace, + }) + ]); } } diff --git a/src/case/toolbar/toolbar.multiselect.js b/src/case/toolbar/toolbar.multiselect.js index f5fb1bf45..f0df9ce78 100644 --- a/src/case/toolbar/toolbar.multiselect.js +++ b/src/case/toolbar/toolbar.multiselect.js @@ -1,6 +1,16 @@ -import { shortcut, extend, emptyFn, i18nText, Controller, createWidget, Events } from "@/core"; -import { BasicButton, Checkbox } from "@/base"; +import { Checkbox, Label, BasicButton } from "@/base"; import { HalfIconButton } from "../button"; +import { + HTapeLayout, + CenterAdaptLayout, + shortcut, + extend, + emptyFn, + i18nText, + Controller, + createWidget, + Events +} from "@/core"; /** * guy @@ -11,9 +21,9 @@ import { HalfIconButton } from "../button"; */ @shortcut() export class MultiSelectBar extends BasicButton { - static xtype = "bi.multi_select_bar" + static xtype = "bi.multi_select_bar"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -23,7 +33,7 @@ export class MultiSelectBar extends BasicButton { isAllCheckedBySelectedValue: emptyFn, // 手动控制选中 disableSelected: true, - isHalfCheckedBySelectedValue (selectedValues) { + isHalfCheckedBySelectedValue(selectedValues) { return selectedValues.length > 0; }, halfSelected: false, @@ -39,7 +49,7 @@ export class MultiSelectBar extends BasicButton { const isSelect = o.selected === true; const isHalfSelect = !o.selected && o.halfSelected; this.checkbox = createWidget({ - type: "bi.checkbox", + type: Checkbox.xtype, stopPropagation: true, handler: () => { this.setSelected(this.isSelected()); @@ -50,7 +60,7 @@ export class MultiSelectBar extends BasicButton { iconHeight: o.iconHeight, }); this.half = createWidget({ - type: "bi.half_icon_button", + type: HalfIconButton.xtype, stopPropagation: true, handler: () => { this.setSelected(true); @@ -72,7 +82,7 @@ export class MultiSelectBar extends BasicButton { this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this); }); this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -84,17 +94,20 @@ export class MultiSelectBar extends BasicButton { py: o.py, }); createWidget({ - type: "bi.htape", + type: HTapeLayout.xtype, element: this, - items: [{ - width: o.iconWrapperWidth, - el: { - type: "bi.center_adapt", - items: [this.checkbox, this.half], + items: [ + { + width: o.iconWrapperWidth, + el: { + type: CenterAdaptLayout.xtype, + items: [this.checkbox, this.half], + }, }, - }, { - el: this.text, - }], + { + el: this.text, + } + ], }); } diff --git a/src/case/tree/tree.level.js b/src/case/tree/tree.level.js index 426175b54..7f49ece0f 100644 --- a/src/case/tree/tree.level.js +++ b/src/case/tree/tree.level.js @@ -9,11 +9,14 @@ import { isNotEmptyArray, Tree, createWidget, - VerticalLayout, Controller, Events + VerticalLayout, + Controller, + Events } from "@/core"; import { ButtonTree, CustomTree } from "@/base"; import { TreeExpander } from "./treeexpander/tree.expander"; -import { BasicTreeItem, BasicTreeNode } from "@/case"; +import { BasicTreeItem } from "@/case/button/treeitem/treeitem"; +import { BasicTreeNode } from "@/case/button/node/treenode"; @shortcut() export class LevelTree extends Widget { @@ -74,33 +77,40 @@ export class LevelTree extends Widget { } initTree(nodes) { - const self = this, o = this.options; + const self = this, + o = this.options; this.empty(); this._assertId(nodes); this.tree = createWidget({ type: CustomTree.xtype, element: this, - expander: extend({ - type: TreeExpander.xtype, - el: {}, - isDefaultInit: false, - selectable: false, - popup: { - type: CustomTree.xtype, + expander: extend( + { + type: TreeExpander.xtype, + el: {}, + isDefaultInit: false, + selectable: false, + popup: { + type: CustomTree.xtype, + }, }, - }, o.expander), + o.expander + ), items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), value: o.value, - el: extend({ - type: ButtonTree.xtype, - chooseType: 0, - layouts: [ - { - type: VerticalLayout.xtype, - } - ], - }, o.el), + el: extend( + { + type: ButtonTree.xtype, + chooseType: 0, + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + o.el + ), }); this.tree.on(Controller.EVENT_CHANGE, function (type, value, ob) { self.fireEvent(Controller.EVENT_CHANGE, arguments); diff --git a/src/case/tree/treeexpander/tree.expander.popup.js b/src/case/tree/treeexpander/tree.expander.popup.js index d00c790f7..a07829d3b 100644 --- a/src/case/tree/treeexpander/tree.expander.popup.js +++ b/src/case/tree/treeexpander/tree.expander.popup.js @@ -19,10 +19,13 @@ export class TreeExpanderPopup extends Widget { const { el, value, layer, showLine, isLastNode } = this.options; const offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; - this.popupView = createWidget({ - ...el, - value, - }, this); + this.popupView = createWidget( + { + ...el, + value, + }, + this + ); this.popupView.on(Controller.EVENT_CHANGE, function () { self.fireEvent(Controller.EVENT_CHANGE, arguments); @@ -35,11 +38,9 @@ export class TreeExpanderPopup extends Widget { return { type: VerticalLayout.xtype, - cls: (showLine && !isLastNode) ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", + cls: showLine && !isLastNode ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", scrolly: null, - items: [ - this.popupView - ], + items: [this.popupView], }; } diff --git a/src/case/trigger/trigger.editor.js b/src/case/trigger/trigger.editor.js index 3bb8439ac..2ea76e859 100644 --- a/src/case/trigger/trigger.editor.js +++ b/src/case/trigger/trigger.editor.js @@ -1,6 +1,7 @@ -import { shortcut, extend, emptyFn, createWidget, toPix, Controller } from "@/core"; -import { Trigger } from "@/base"; import { SignEditor } from "../editor"; +import { HorizontalFillLayout, shortcut, extend, emptyFn, createWidget, toPix, Controller } from "@/core"; +import { TriggerIconButton } from "../button"; +import { Trigger } from "@/base"; /** * 文本输入框trigger @@ -20,9 +21,11 @@ export class EditorTrigger extends Trigger { _defaultConfig(config) { const conf = super._defaultConfig(...arguments); - + return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-editor-trigger bi-border-radius ${config.simple ? "bi-border-bottom" : "bi-border"}`, + baseCls: `${conf.baseCls || ""} bi-editor-trigger bi-border-radius ${ + config.simple ? "bi-border-bottom" : "bi-border" + }`, height: 24, validationChecker: emptyFn, quitChecker: emptyFn, @@ -36,7 +39,7 @@ export class EditorTrigger extends Trigger { super._init(...arguments); const o = this.options; this.editor = createWidget({ - type: "bi.sign_editor", + type: SignEditor.xtype, height: toPix(o.height, 2), value: o.value, validationChecker: o.validationChecker, @@ -67,15 +70,16 @@ export class EditorTrigger extends Trigger { createWidget({ element: this, - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, height: toPix(o.height, 2), items: [ { el: this.editor, width: "fill", - }, { + }, + { el: { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, width: o.triggerWidth || toPix(o.height, 2), }, width: "", diff --git a/src/case/trigger/trigger.icon.js b/src/case/trigger/trigger.icon.js index 3368dd070..c1f3b1ffe 100644 --- a/src/case/trigger/trigger.icon.js +++ b/src/case/trigger/trigger.icon.js @@ -1,3 +1,4 @@ +import { TriggerIconButton } from "../button"; import { shortcut, extend, createWidget } from "@/core"; import { Trigger } from "@/base"; @@ -10,7 +11,7 @@ import { Trigger } from "@/base"; */ @shortcut() export class IconTrigger extends Trigger { - static xtype = "bi.icon_trigger" + static xtype = "bi.icon_trigger"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -25,7 +26,7 @@ export class IconTrigger extends Trigger { const o = this.options; super._init(...arguments); this.iconButton = createWidget(o.el, { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, element: this, width: o.width, height: o.height, diff --git a/src/case/trigger/trigger.icon.text.js b/src/case/trigger/trigger.icon.text.js index b93c3181b..658a8ccf3 100644 --- a/src/case/trigger/trigger.icon.text.js +++ b/src/case/trigger/trigger.icon.text.js @@ -1,5 +1,6 @@ -import { shortcut, extend, isKey, createWidget, isEmptyString } from "@/core"; -import { Trigger } from "@/base"; +import { Label, Trigger } from "@/base"; +import { TriggerIconButton, IconChangeButton } from "../button"; +import { HorizontalFillLayout, shortcut, extend, isKey, createWidget, isEmptyString } from "@/core"; /** * 文字trigger @@ -10,11 +11,11 @@ import { Trigger } from "@/base"; */ @shortcut() export class IconTextTrigger extends Trigger { - static xtype = "bi.icon_text_trigger" + static xtype = "bi.icon_text_trigger"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-text-trigger`, height: 24, @@ -28,8 +29,8 @@ export class IconTextTrigger extends Trigger { super._init(...arguments); const o = this.options; this.text = createWidget({ - type: "bi.label", - cls: `select-text-label${isKey(o.textCls) ? (` ${o.textCls}`) : ""}`, + type: Label.xtype, + cls: `select-text-label${isKey(o.textCls) ? ` ${o.textCls}` : ""}`, textAlign: "left", height: o.height, hgap: o.textHgap, @@ -41,37 +42,41 @@ export class IconTextTrigger extends Trigger { text: o.text, }); this.trigerButton = createWidget({ - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, width: o.triggerWidth || o.height, }); createWidget({ element: this, - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["", "fill", ""], ref: _ref => { this.wrapper = _ref; }, - items: [{ - el: { - type: "bi.icon_change_button", - cls: "icon-combo-trigger-icon", - width: o.triggerWidth || o.height, - iconCls: o.iconCls, - invisible: !o.iconCls, - ref: _ref => { - this.icon = _ref; + items: [ + { + el: { + type: IconChangeButton.xtype, + cls: "icon-combo-trigger-icon", + width: o.triggerWidth || o.height, + iconCls: o.iconCls, + invisible: !o.iconCls, + ref: _ref => { + this.icon = _ref; + }, + iconHeight: o.iconHeight, + iconWidth: o.iconWidth, + disableSelected: true, }, - iconHeight: o.iconHeight, - iconWidth: o.iconWidth, - disableSelected: true, }, - }, { - el: this.text, - lgap: isEmptyString(o.iconCls) ? 5 : 0, - }, { - el: this.trigerButton, - }], + { + el: this.text, + lgap: isEmptyString(o.iconCls) ? 5 : 0, + }, + { + el: this.trigerButton, + } + ], }); } diff --git a/src/case/trigger/trigger.icon.text.select.js b/src/case/trigger/trigger.icon.text.select.js index 0045972a4..76c02d519 100644 --- a/src/case/trigger/trigger.icon.text.select.js +++ b/src/case/trigger/trigger.icon.text.select.js @@ -1,3 +1,4 @@ +import { IconTextTrigger } from "./trigger.icon.text"; import { shortcut, extend, createWidget, isFunction, isArray, isNotNull, any, deepContains, Tree } from "@/core"; import { Trigger } from "@/base"; @@ -6,7 +7,7 @@ import { Trigger } from "@/base"; */ @shortcut() export class SelectIconTextTrigger extends Trigger { - static xtype = "bi.select_icon_text_trigger" + static xtype = "bi.select_icon_text_trigger"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -23,7 +24,7 @@ export class SelectIconTextTrigger extends Trigger { const o = this.options; const obj = this._digist(o.value, o.items); this.trigger = createWidget({ - type: "bi.icon_text_trigger", + type: IconTextTrigger.xtype, element: this, text: obj.text, textCls: obj.textCls, @@ -52,7 +53,7 @@ export class SelectIconTextTrigger extends Trigger { text: item.text || item.value, iconCls: item.iconCls, }; - + return true; } }); diff --git a/src/case/trigger/trigger.text.js b/src/case/trigger/trigger.text.js index f4e15110d..dfe9cef1b 100644 --- a/src/case/trigger/trigger.text.js +++ b/src/case/trigger/trigger.text.js @@ -1,5 +1,6 @@ -import { shortcut, isFunction, isKey, isNotEmptyString } from "@/core"; -import { Trigger } from "@/base"; +import { Label, IconButton, Trigger } from "@/base"; +import { TriggerIconButton } from "../button"; +import { HorizontalFillLayout, VerticalAdaptLayout, shortcut, isFunction, isKey, isNotEmptyString } from "@/core"; /** * 文字trigger @@ -10,9 +11,9 @@ import { Trigger } from "@/base"; */ @shortcut() export class TextTrigger extends Trigger { - static xtype = "bi.text_trigger" + static xtype = "bi.text_trigger"; - static EVENT_CLEAR = "EVENT_CLEAR" + static EVENT_CLEAR = "EVENT_CLEAR"; props() { return { @@ -35,11 +36,13 @@ export class TextTrigger extends Trigger { const defaultText = this.getDefaultText(); const label = { - type: "bi.label", + type: Label.xtype, ref: _ref => { this.text = _ref; }, - cls: `select-text-label ${o.textCls} ${!isNotEmptyString(text) && isNotEmptyString(defaultText) ? "bi-tips" : ""}`, + cls: `select-text-label ${o.textCls} ${ + !isNotEmptyString(text) && isNotEmptyString(defaultText) ? "bi-tips" : "" + }`, textAlign: "left", height: o.height, text: text || o.defaultText, @@ -55,57 +58,65 @@ export class TextTrigger extends Trigger { }; const triggerButton = { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, ref: _ref => { this.triggerButton = _ref; }, width: o.triggerWidth || o.height, }; - return ({ - type: "bi.horizontal_fill", + return { + type: HorizontalFillLayout.xtype, columnSize: ["fill", ""], - items: [{ - el: label, - width: "fill", - }, { - el: o.allowClear ? { - type: "bi.vertical_adapt", - width: o.triggerWidth || o.height, - height: o.height, - horizontalAlign: "left", - scrollable: false, - items: [{ - el: { - type: "bi.icon_button", - ref: _ref => { - this.clearBtn = _ref; - }, - cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`, - stopPropagation: true, + items: [ + { + el: label, + width: "fill", + }, + { + el: o.allowClear + ? { + type: VerticalAdaptLayout.xtype, width: o.triggerWidth || o.height, - invisible: !isNotEmptyString(o.text), - handler: () => { - this.fireEvent(TextTrigger.EVENT_CLEAR); - }, - }, - }, { - el: triggerButton, - }], - } : triggerButton, - }], - }); + height: o.height, + horizontalAlign: "left", + scrollable: false, + items: [ + { + el: { + type: IconButton.xtype, + ref: _ref => { + this.clearBtn = _ref; + }, + cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`, + stopPropagation: true, + width: o.triggerWidth || o.height, + invisible: !isNotEmptyString(o.text), + handler: () => { + this.fireEvent(TextTrigger.EVENT_CLEAR); + }, + }, + }, + { + el: triggerButton, + } + ], + } + : triggerButton, + } + ], + }; } getText() { const o = this.options; - + return isFunction(o.text) ? o.text() : o.text; } getDefaultText() { const o = this.options; - + return isFunction(o.defaultText) ? o.defaultText() : o.defaultText; } diff --git a/src/case/trigger/trigger.text.select.js b/src/case/trigger/trigger.text.select.js index 8094a424d..48af5c5de 100644 --- a/src/case/trigger/trigger.text.select.js +++ b/src/case/trigger/trigger.text.select.js @@ -1,6 +1,6 @@ +import { TextTrigger } from "./trigger.text"; import { shortcut, extend, emptyFn, createWidget, isFunction, isArray, Tree, each, contains, remove } from "@/core"; import { Trigger } from "@/base"; -import { TextTrigger } from "./trigger.text"; /** * 选择字段trigger @@ -11,9 +11,9 @@ import { TextTrigger } from "./trigger.text"; */ @shortcut() export class SelectTextTrigger extends Trigger { - static xtype = "bi.select_text_trigger" + static xtype = "bi.select_text_trigger"; - static EVENT_CLEAR = "EVENT_CLEAR" + static EVENT_CLEAR = "EVENT_CLEAR"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -30,7 +30,7 @@ export class SelectTextTrigger extends Trigger { const o = this.options; const text = this._digest(o.value, o.items); this.trigger = createWidget({ - type: "bi.text_trigger", + type: TextTrigger.xtype, element: this, height: o.height, readonly: o.readonly, @@ -45,13 +45,15 @@ export class SelectTextTrigger extends Trigger { tipType: o.tipType, title: null, allowClear: o.allowClear, - listeners: [{ - eventName: TextTrigger.EVENT_CLEAR, - action: () => { - this.setText(""); - this.fireEvent(SelectTextTrigger.EVENT_CLEAR); + listeners: [ + { + eventName: TextTrigger.EVENT_CLEAR, + action: () => { + this.setText(""); + this.fireEvent(SelectTextTrigger.EVENT_CLEAR); + }, }, - }], + ], }); } @@ -67,7 +69,7 @@ export class SelectTextTrigger extends Trigger { each(val, (index, v) => { result.push(o.valueFormatter(v)); }); - + return result.join(","); } diff --git a/src/case/trigger/trigger.text.select.small.js b/src/case/trigger/trigger.text.select.small.js index 944ee1a51..2f3106a3b 100644 --- a/src/case/trigger/trigger.text.select.small.js +++ b/src/case/trigger/trigger.text.select.small.js @@ -1,3 +1,4 @@ +import { SmallTextTrigger } from "./trigger.text.small"; import { shortcut, extend, toPix, createWidget, isArray, deepContains, each, contains, Tree } from "@/core"; import { Trigger } from "@/base"; @@ -9,7 +10,7 @@ import { Trigger } from "@/base"; */ @shortcut() export class SmallSelectTextTrigger extends Trigger { - static xtype = "bi.small_select_text_trigger" + static xtype = "bi.small_select_text_trigger"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -23,7 +24,7 @@ export class SmallSelectTextTrigger extends Trigger { const o = this.options; const obj = this._digest(o.value, o.items); this.trigger = createWidget({ - type: "bi.small_text_trigger", + type: SmallTextTrigger.xtype, element: this, height: toPix(o.height, 2), text: obj.text, diff --git a/src/case/trigger/trigger.text.small.js b/src/case/trigger/trigger.text.small.js index 9269a4210..524c2e711 100644 --- a/src/case/trigger/trigger.text.small.js +++ b/src/case/trigger/trigger.text.small.js @@ -1,5 +1,6 @@ -import { shortcut, extend, createWidget } from "@/core"; -import { Trigger } from "@/base"; +import { Label, Trigger } from "@/base"; +import { TriggerIconButton } from "../button"; +import { HorizontalFillLayout, shortcut, extend, createWidget } from "@/core"; /** * 文字trigger(右边小三角小一号的) == @@ -9,11 +10,11 @@ import { Trigger } from "@/base"; */ @shortcut() export class SmallTextTrigger extends Trigger { - static xtype = "bi.small_text_trigger" + static xtype = "bi.small_text_trigger"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-text-trigger`, height: 20, @@ -25,7 +26,7 @@ export class SmallTextTrigger extends Trigger { super._init(...arguments); const o = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", height: o.height, text: o.text, @@ -37,20 +38,23 @@ export class SmallTextTrigger extends Trigger { bgap: o.textBgap, }); this.trigerButton = createWidget({ - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, width: o.triggerWidth || o.height, }); createWidget({ element: this, - type: "bi.horizontal_fill", - items: [{ - el: this.text, - width: "fill", - }, { - el: this.trigerButton, - width: "", - }], + type: HorizontalFillLayout.xtype, + items: [ + { + el: this.text, + width: "fill", + }, + { + el: this.trigerButton, + width: "", + } + ], }); } diff --git a/src/case/ztree/asynctree.js b/src/case/ztree/asynctree.js index d8d7028c6..fd186ae20 100644 --- a/src/case/ztree/asynctree.js +++ b/src/case/ztree/asynctree.js @@ -162,14 +162,15 @@ export class Asynctree extends TreeView { // 展开节点 _beforeExpandNode(treeId, treeNode) { - const self = this, o = this.options; + const self = this, + o = this.options; function complete(d) { const nodes = d.items || []; if (nodes.length > 0) { callback(self._dealWidthNodes(nodes), !!d.hasNext); } - }; + } function callback(nodes, hasNext) { self.nodes.addNodes(treeNode, nodes); @@ -184,12 +185,17 @@ export class Asynctree extends TreeView { // console.log(times); options = options || {}; const parentValues = treeNode.parentValues || self._getParentValues(treeNode); - const op = extend({}, o.paras, { - id: treeNode.id, - times: options.times, - parentValues: parentValues.concat(self._getNodeValue(treeNode)), - checkState: treeNode.getCheckStatus(), - }, options); + const op = extend( + {}, + o.paras, + { + id: treeNode.id, + times: options.times, + parentValues: parentValues.concat(self._getNodeValue(treeNode)), + checkState: treeNode.getCheckStatus(), + }, + options + ); o.itemsCreator(op, complete); } diff --git a/src/case/ztree/jquery.ztree.core-3.5.js b/src/case/ztree/jquery.ztree.core-3.5.js index f4e899044..0e1aedf39 100644 --- a/src/case/ztree/jquery.ztree.core-3.5.js +++ b/src/case/ztree/jquery.ztree.core-3.5.js @@ -13,7 +13,9 @@ */ (function ($) { - var settings = {}, roots = {}, caches = {}, + var settings = {}, + roots = {}, + caches = {}, //default consts of core _consts = { className: { @@ -22,7 +24,7 @@ LEVEL: "level", ICO_LOADING: "ico_loading", SWITCH: "switch", - NAME: 'node_name' + NAME: "node_name", }, event: { NODECREATED: "ztree_nodeCreated", @@ -33,14 +35,14 @@ ASYNC_ERROR: "ztree_async_error", REMOVE: "ztree_remove", SELECTED: "ztree_selected", - UNSELECTED: "ztree_unselected" + UNSELECTED: "ztree_unselected", }, id: { A: "_a", ICON: "_ico", SPAN: "_span", SWITCH: "_switch", - UL: "_ul" + UL: "_ul", }, line: { ROOT: "root", @@ -48,16 +50,16 @@ CENTER: "center", BOTTOM: "bottom", NOLINE: "noline", - LINE: "line" + LINE: "line", }, folder: { OPEN: "open", CLOSE: "close", - DOCU: "docu" + DOCU: "docu", }, node: { - CURSELECTED: "curSelectedNode" - } + CURSELECTED: "curSelectedNode", + }, }, //default setting of core _setting = { @@ -75,7 +77,7 @@ showIcon: true, showLine: true, showTitle: true, - txtSelectedEnable: false + txtSelectedEnable: false, }, data: { key: { @@ -84,7 +86,7 @@ name: "name", title: "", url: "url", - icon: "icon" + icon: "icon", }, render: { name: null, @@ -94,12 +96,12 @@ enable: false, idKey: "id", pIdKey: "pId", - rootPId: null + rootPId: null, }, keep: { parent: false, - leaf: false - } + leaf: false, + }, }, async: { enable: false, @@ -111,7 +113,7 @@ url: "", autoParam: [], otherParam: [], - dataFilter: null + dataFilter: null, }, callback: { beforeAsync: null, @@ -134,8 +136,8 @@ onMouseUp: null, onExpand: null, onCollapse: null, - onRemove: null - } + onRemove: null, + }, }, //default root of core //zTree use root to save full data @@ -151,7 +153,7 @@ r.noSelection = true; r.createdNodes = []; r.zId = 0; - r._ver = (new Date()).getTime(); + r._ver = new Date().getTime(); }, //default cache of core _initCache = function (setting) { @@ -188,7 +190,14 @@ }); o.bind(c.ASYNC_ERROR, function (event, treeId, node, XMLHttpRequest, textStatus, errorThrown) { - tools.apply(setting.callback.onAsyncError, [event, treeId, node, XMLHttpRequest, textStatus, errorThrown]); + tools.apply(setting.callback.onAsyncError, [ + event, + treeId, + node, + XMLHttpRequest, + textStatus, + errorThrown, + ]); }); o.bind(c.REMOVE, function (event, treeId, treeNode) { @@ -219,9 +228,12 @@ _eventProxy = function (event) { var target = event.target, setting = data.getSetting(event.data.treeId), - tId = "", node = null, - nodeEventType = "", treeEventType = "", - nodeEventCallback = null, treeEventCallback = null, + tId = "", + node = null, + nodeEventType = "", + treeEventType = "", + nodeEventCallback = null, + treeEventCallback = null, tmp = null; if (tools.eqs(event.type, "mousedown")) { @@ -259,34 +271,41 @@ if (tId.length > 0) { node = data.getNodeCache(setting, tId); switch (nodeEventType) { - case "switchNode" : + case "switchNode": var isParent = data.nodeIsParent(setting, node); if (!isParent) { nodeEventType = ""; - } else if (tools.eqs(event.type, "click") - || (tools.eqs(event.type, "dblclick") && tools.apply(setting.view.dblClickExpand, [setting.treeId, node], setting.view.dblClickExpand))) { + } else if ( + tools.eqs(event.type, "click") || + (tools.eqs(event.type, "dblclick") && + tools.apply( + setting.view.dblClickExpand, + [setting.treeId, node], + setting.view.dblClickExpand + )) + ) { nodeEventCallback = handler.onSwitchNode; } else { nodeEventType = ""; } break; - case "clickNode" : + case "clickNode": nodeEventCallback = handler.onClickNode; break; } } // event to zTree switch (treeEventType) { - case "mousedown" : + case "mousedown": treeEventCallback = handler.onZTreeMousedown; break; - case "mouseup" : + case "mouseup": treeEventCallback = handler.onZTreeMouseup; break; - case "dblclick" : + case "dblclick": treeEventCallback = handler.onZTreeDblclick; break; - case "contextmenu" : + case "contextmenu": treeEventCallback = handler.onZTreeContextmenu; break; } @@ -296,7 +315,7 @@ nodeEventType: nodeEventType, nodeEventCallback: nodeEventCallback, treeEventType: treeEventType, - treeEventCallback: treeEventCallback + treeEventCallback: treeEventCallback, }; return proxyResult; }, @@ -306,16 +325,16 @@ var r = data.getRoot(setting), children = data.nodeChildren(setting, n); n.level = level; - n.tId = setting.treeId + "_" + (++r.zId); + n.tId = setting.treeId + "_" + ++r.zId; n.parentTId = parentNode ? parentNode.tId : null; - n.open = (typeof n.open == "string") ? tools.eqs(n.open, "true") : !!n.open; + n.open = typeof n.open == "string" ? tools.eqs(n.open, "true") : !!n.open; var isParent = data.nodeIsParent(setting, n); if (tools.isArray(children)) { data.nodeIsParent(setting, n, true); n.zAsync = true; } else { isParent = data.nodeIsParent(setting, n, isParent); - n.open = (isParent && !setting.async.enable) ? n.open : false; + n.open = isParent && !setting.async.enable ? n.open : false; n.zAsync = !isParent; } n.isFirstNode = isFirstNode; @@ -349,7 +368,7 @@ afterA: [], innerBeforeA: [], innerAfterA: [], - zTreeTools: [] + zTreeTools: [], }, //method of operate data data = { @@ -394,7 +413,8 @@ _init.roots.push(initRoot); }, addNodesData: function (setting, parentNode, index, nodes) { - var children = data.nodeChildren(setting, parentNode), params; + var children = data.nodeChildren(setting, parentNode), + params; if (!children) { children = data.nodeChildren(setting, parentNode, []); index = -1; @@ -438,7 +458,9 @@ }, fixPIdKeyValue: function (setting, node) { if (setting.data.simpleData.enable) { - node[setting.data.simpleData.pIdKey] = node.parentTId ? node.getParentNode()[setting.data.simpleData.idKey] : setting.data.simpleData.rootPId; + node[setting.data.simpleData.pIdKey] = node.parentTId + ? node.getParentNode()[setting.data.simpleData.idKey] + : setting.data.simpleData.rootPId; } }, getAfterA: function (setting, node, array) { @@ -481,7 +503,7 @@ children = data.nodeChildren(setting, p); for (var i = 0, l = children.length - 1; i <= l; i++) { if (children[i] === node) { - return (i == l ? null : children[i + 1]); + return i == l ? null : children[i + 1]; } } return null; @@ -551,7 +573,7 @@ return result; }, getNodesByFilter: function (setting, nodes, filter, isSingle, invokeParam) { - if (!nodes) return (isSingle ? null : []); + if (!nodes) return isSingle ? null : []; var result = isSingle ? null : []; for (var i = 0, l = nodes.length; i < l; i++) { var node = nodes[i]; @@ -576,7 +598,7 @@ children = data.nodeChildren(setting, p); for (var i = 0, l = children.length; i < l; i++) { if (children[i] === node) { - return (i == 0 ? null : children[i - 1]); + return i == 0 ? null : children[i - 1]; } } return null; @@ -624,7 +646,7 @@ return null; } var key = setting.data.key.children; - if (typeof newChildren !== 'undefined') { + if (typeof newChildren !== "undefined") { node[key] = newChildren; } return node[key]; @@ -634,7 +656,7 @@ return false; } var key = setting.data.key.isParent; - if (typeof newIsParent !== 'undefined') { + if (typeof newIsParent !== "undefined") { if (typeof newIsParent === "string") { newIsParent = tools.eqs(newIsParent, "true"); } @@ -649,11 +671,11 @@ }, nodeName: function (setting, node, newName) { var key = setting.data.key.name; - if (typeof newName !== 'undefined') { + if (typeof newName !== "undefined") { node[key] = newName; } var rawName = "" + node[key]; - if (typeof setting.data.render.name === 'function') { + if (typeof setting.data.render.name === "function") { return setting.data.render.name.call(this, rawName, node); } return rawName; @@ -661,7 +683,7 @@ nodeTitle: function (setting, node) { var t = setting.data.key.title === "" ? setting.data.key.name : setting.data.key.title; var rawTitle = "" + node[t]; - if (typeof setting.data.render.title === 'function') { + if (typeof setting.data.render.title === "function") { return setting.data.render.title.call(this, rawTitle, node); } return rawTitle; @@ -719,7 +741,8 @@ } }, transformTozTreeFormat: function (setting, sNodes) { - var i, l, + var i, + l, key = setting.data.simpleData.idKey, parentKey = setting.data.simpleData.pIdKey; if (!key || key == "" || !sNodes) return []; @@ -746,7 +769,7 @@ } else { return [sNodes]; } - } + }, }, //method of event proxy event = { @@ -762,33 +785,33 @@ }, bindTree: function (setting) { var eventParam = { - treeId: setting.treeId + treeId: setting.treeId, }, o = setting.treeObj; if (!setting.view.txtSelectedEnable) { // for can't select text - o.bind('selectstart', handler.onSelectStart).css({ - "-moz-user-select": "-moz-none" + o.bind("selectstart", handler.onSelectStart).css({ + "-moz-user-select": "-moz-none", }); } - o.bind('click', eventParam, event.proxy); - o.bind('dblclick', eventParam, event.proxy); - o.bind('mouseover', eventParam, event.proxy); - o.bind('mouseout', eventParam, event.proxy); - o.bind('mousedown', eventParam, event.proxy); - o.bind('mouseup', eventParam, event.proxy); - o.bind('contextmenu', eventParam, event.proxy); + o.bind("click", eventParam, event.proxy); + o.bind("dblclick", eventParam, event.proxy); + o.bind("mouseover", eventParam, event.proxy); + o.bind("mouseout", eventParam, event.proxy); + o.bind("mousedown", eventParam, event.proxy); + o.bind("mouseup", eventParam, event.proxy); + o.bind("contextmenu", eventParam, event.proxy); }, unbindTree: function (setting) { var o = setting.treeObj; - o.unbind('selectstart', handler.onSelectStart) - .unbind('click', event.proxy) - .unbind('dblclick', event.proxy) - .unbind('mouseover', event.proxy) - .unbind('mouseout', event.proxy) - .unbind('mousedown', event.proxy) - .unbind('mouseup', event.proxy) - .unbind('contextmenu', event.proxy); + o.unbind("selectstart", handler.onSelectStart) + .unbind("click", event.proxy) + .unbind("dblclick", event.proxy) + .unbind("mouseover", event.proxy) + .unbind("mouseout", event.proxy) + .unbind("mousedown", event.proxy) + .unbind("mouseup", event.proxy) + .unbind("contextmenu", event.proxy); }, doProxy: function (e) { var results = []; @@ -805,7 +828,8 @@ var setting = data.getSetting(e.data.treeId); if (!tools.uCanDo(setting, e)) return true; var results = event.doProxy(e), - r = true, x = false; + r = true, + x = false; for (var i = 0, l = results.length; i < l; i++) { var proxyResult = results[i]; if (proxyResult.nodeEventCallback) { @@ -818,14 +842,15 @@ } } return r; - } + }, }, //method of event handler handler = { onSwitchNode: function (event, node) { var setting = data.getSetting(event.data.treeId); if (node.open) { - if (tools.apply(setting.callback.beforeCollapse, [setting.treeId, node], true) == false) return true; + if (tools.apply(setting.callback.beforeCollapse, [setting.treeId, node], true) == false) + return true; data.getRoot(setting).expandTriggerFlag = true; view.switchNode(setting, node); } else { @@ -837,8 +862,18 @@ }, onClickNode: function (event, node) { var setting = data.getSetting(event.data.treeId), - clickFlag = ((setting.view.autoCancelSelected && (event.ctrlKey || event.metaKey)) && data.isSelectedNode(setting, node)) ? 0 : (setting.view.autoCancelSelected && (event.ctrlKey || event.metaKey) && setting.view.selectedMulti) ? 2 : 1; - if (tools.apply(setting.callback.beforeClick, [setting.treeId, node, clickFlag], true) == false) return true; + clickFlag = + setting.view.autoCancelSelected && + (event.ctrlKey || event.metaKey) && + data.isSelectedNode(setting, node) + ? 0 + : setting.view.autoCancelSelected && + (event.ctrlKey || event.metaKey) && + setting.view.selectedMulti + ? 2 + : 1; + if (tools.apply(setting.callback.beforeClick, [setting.treeId, node, clickFlag], true) == false) + return true; if (clickFlag === 0) { view.cancelPreSelectedNode(setting, node); } else { @@ -873,17 +908,17 @@ if (tools.apply(setting.callback.beforeRightClick, [setting.treeId, node], true)) { tools.apply(setting.callback.onRightClick, [event, setting.treeId, node]); } - return (typeof setting.callback.onRightClick) != "function"; + return typeof setting.callback.onRightClick != "function"; }, onSelectStart: function (e) { var n = e.originalEvent.srcElement.nodeName.toLowerCase(); - return (n === "input" || n === "textarea"); - } + return n === "input" || n === "textarea"; + }, }, //method of tools for zTree tools = { apply: function (fun, param, defaultValue) { - if ((typeof fun) == "function") { + if (typeof fun == "function") { return fun.apply(zt, param ? param : []); } return defaultValue; @@ -891,13 +926,18 @@ canAsync: function (setting, node) { var children = data.nodeChildren(setting, node); var isParent = data.nodeIsParent(setting, node); - return (setting.async.enable && node && isParent && !(node.zAsync || (children && children.length > 0))); + return setting.async.enable && node && isParent && !(node.zAsync || (children && children.length > 0)); }, clone: function (obj) { if (obj === null) return null; var o = tools.isArray(obj) ? [] : {}; for (var i in obj) { - o[i] = (obj[i] instanceof Date) ? new Date(obj[i].getTime()) : (typeof obj[i] === "object" ? tools.clone(obj[i]) : obj[i]); + o[i] = + obj[i] instanceof Date + ? new Date(obj[i].getTime()) + : typeof obj[i] === "object" + ? tools.clone(obj[i]) + : obj[i]; } return o; }, @@ -908,10 +948,9 @@ return Object.prototype.toString.apply(arr) === "[object Array]"; }, isElement: function (o) { - return ( - typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 - o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string" - ); + return typeof HTMLElement === "object" + ? o instanceof HTMLElement //DOM2 + : o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string"; }, $: function (node, exp, setting) { if (!!exp && typeof exp != "string") { @@ -928,7 +967,10 @@ if (!curDom) return null; while (curDom && curDom.id !== setting.treeId) { for (var i = 0, l = targetExpr.length; curDom.tagName && i < l; i++) { - if (tools.eqs(curDom.tagName, targetExpr[i].tagName) && curDom.getAttribute(targetExpr[i].attrName) !== null) { + if ( + tools.eqs(curDom.tagName, targetExpr[i].tagName) && + curDom.getAttribute(targetExpr[i].attrName) !== null + ) { return curDom; } } @@ -937,14 +979,14 @@ return null; }, getNodeMainDom: function (target) { - return ($(target).parent("li").get(0) || $(target).parentsUntil("li").parent().get(0)); + return $(target).parent("li").get(0) || $(target).parentsUntil("li").parent().get(0); }, isChildOrSelf: function (dom, parentId) { - return ($(dom).closest("#" + parentId).length > 0); + return $(dom).closest("#" + parentId).length > 0; }, uCanDo: function (setting, e) { return true; - } + }, }, //method of operate ztree dom view = { @@ -969,7 +1011,7 @@ view.replaceIcoClass(parentNode, target_icoObj, consts.folder.CLOSE); parentNode.open = false; target_ulObj.css({ - "display": "none" + display: "none", }); } @@ -987,9 +1029,10 @@ if (!nodes) return []; var html = []; - var tmpPNode = (parentNode) ? parentNode : data.getRoot(setting), + var tmpPNode = parentNode ? parentNode : data.getRoot(setting), tmpPChild = data.nodeChildren(setting, tmpPNode), - isFirstNode, isLastNode; + isFirstNode, + isLastNode; if (!tmpPChild || index >= tmpPChild.length - nodes.length) { index = -1; @@ -998,8 +1041,8 @@ for (var i = 0, l = nodes.length; i < l; i++) { var node = nodes[i]; if (initFlag) { - isFirstNode = ((index === 0 || tmpPChild.length == nodes.length) && (i == 0)); - isLastNode = (index < 0 && i == (nodes.length - 1)); + isFirstNode = (index === 0 || tmpPChild.length == nodes.length) && i == 0; + isLastNode = index < 0 && i == nodes.length - 1; data.initNode(setting, level, node, parentNode, isFirstNode, isLastNode, openFlag); data.addNodeCache(setting, node); } @@ -1009,7 +1052,15 @@ var children = data.nodeChildren(setting, node); if (children && children.length > 0) { //make child html first, because checkType - childHtml = view.appendNodes(setting, level + 1, children, node, -1, initFlag, openFlag && node.open); + childHtml = view.appendNodes( + setting, + level + 1, + children, + node, + -1, + initFlag, + openFlag && node.open + ); } if (openFlag) { view.makeDOMNodeMainBefore(html, setting, node); @@ -1022,7 +1073,7 @@ view.makeDOMNodeNameAfter(html, setting, node); data.getAfterA(setting, node, html); if (isParent && node.open) { - view.makeUlHtml(setting, node, html, childHtml.join('')); + view.makeUlHtml(setting, node, html, childHtml.join("")); } view.makeDOMNodeMainAfter(html, setting, node); data.addCreatedNode(setting, node); @@ -1043,8 +1094,8 @@ } var children = data.nodeChildren(setting, node), childHtml = view.appendNodes(setting, node.level + 1, children, node, -1, false, true); - view.makeUlHtml(setting, node, html, childHtml.join('')); - nObj.append(html.join('')); + view.makeUlHtml(setting, node, html, childHtml.join("")); + nObj.append(html.join("")); }, asyncNode: function (setting, node, isSilent, callback) { var i, l; @@ -1061,20 +1112,25 @@ if (node) { node.isAjaxing = true; var icoObj = $$(node, consts.id.ICON, setting); - icoObj.attr({ "style": "", "class": consts.className.BUTTON + " " + consts.className.ICO_LOADING }); + icoObj.attr({ style: "", class: consts.className.BUTTON + " " + consts.className.ICO_LOADING }); } var tmpParam = {}; var autoParam = tools.apply(setting.async.autoParam, [setting.treeId, node], setting.async.autoParam); for (i = 0, l = autoParam.length; node && i < l; i++) { - var pKey = autoParam[i].split("="), spKey = pKey; + var pKey = autoParam[i].split("="), + spKey = pKey; if (pKey.length > 1) { spKey = pKey[1]; pKey = pKey[0]; } tmpParam[spKey] = node[pKey]; } - var otherParam = tools.apply(setting.async.otherParam, [setting.treeId, node], setting.async.otherParam); + var otherParam = tools.apply( + setting.async.otherParam, + [setting.treeId, node], + setting.async.otherParam + ); if (tools.isArray(otherParam)) { for (i = 0, l = otherParam.length; i < l; i += 2) { tmpParam[otherParam[i]] = otherParam[i + 1]; @@ -1091,7 +1147,10 @@ cache: false, type: setting.async.type, url: tools.apply(setting.async.url, [setting.treeId, node], setting.async.url), - data: setting.async.contentType.indexOf('application/json') > -1 ? JSON.stringify(tmpParam) : tmpParam, + data: + setting.async.contentType.indexOf("application/json") > -1 + ? JSON.stringify(tmpParam) + : tmpParam, dataType: setting.async.dataType, headers: setting.async.headers, xhrFields: setting.async.xhrFields, @@ -1118,7 +1177,11 @@ } view.setNodeLineIcos(setting, node); if (newNodes && newNodes !== "") { - newNodes = tools.apply(setting.async.dataFilter, [setting.treeId, node, newNodes], newNodes); + newNodes = tools.apply( + setting.async.dataFilter, + [setting.treeId, node, newNodes], + newNodes + ); view.addNodes(setting, node, -1, !!newNodes ? tools.clone(newNodes) : [], !!isSilent); } else { view.addNodes(setting, node, -1, [], !!isSilent); @@ -1132,14 +1195,21 @@ } if (node) node.isAjaxing = null; view.setNodeLineIcos(setting, node); - setting.treeObj.trigger(consts.event.ASYNC_ERROR, [setting.treeId, node, XMLHttpRequest, textStatus, errorThrown]); - } + setting.treeObj.trigger(consts.event.ASYNC_ERROR, [ + setting.treeId, + node, + XMLHttpRequest, + textStatus, + errorThrown, + ]); + }, }); return true; }, cancelPreSelectedNode: function (setting, node, excludeNode) { var list = data.getRoot(setting).curSelectedList, - i, n; + i, + n; for (i = list.length - 1; i >= 0; i--) { n = list[i]; if (node === n || (!node && (!excludeNode || excludeNode !== n))) { @@ -1169,10 +1239,14 @@ createNodes: function (setting, level, nodes, parentNode, index) { if (!nodes || nodes.length == 0) return; var root = data.getRoot(setting), - openFlag = !parentNode || parentNode.open || !!$$(data.nodeChildren(setting, parentNode)[0], setting).get(0); + openFlag = + !parentNode || + parentNode.open || + !!$$(data.nodeChildren(setting, parentNode)[0], setting).get(0); root.createdNodes = []; var zTreeHtml = view.appendNodes(setting, level, nodes, parentNode, index, true, openFlag), - parentObj, nextObj; + parentObj, + nextObj; if (!parentNode) { parentObj = setting.treeObj; @@ -1189,9 +1263,9 @@ nextObj = parentObj.children()[index]; } if (index >= 0 && nextObj) { - $(nextObj).before(zTreeHtml.join('')); + $(nextObj).before(zTreeHtml.join("")); } else { - parentObj.append(zTreeHtml.join('')); + parentObj.append(zTreeHtml.join("")); } } @@ -1228,7 +1302,12 @@ callback = tmpCb; root.expandTriggerFlag = false; } - if (!node.open && isParent && ((!$$(node, consts.id.UL, setting).get(0)) || (children && children.length > 0 && !$$(children[0], setting).get(0)))) { + if ( + !node.open && + isParent && + (!$$(node, consts.id.UL, setting).get(0) || + (children && children.length > 0 && !$$(children[0], setting).get(0))) + ) { view.appendParentULDom(setting, node); view.createNodeCallback(setting); } @@ -1263,7 +1342,11 @@ } else { view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE); view.replaceIcoClass(node, icoObj, consts.folder.CLOSE); - if (animateFlag == false || setting.view.expandSpeed == "" || !(children && children.length > 0)) { + if ( + animateFlag == false || + setting.view.expandSpeed == "" || + !(children && children.length > 0) + ) { ulObj.hide(); tools.apply(callback, []); } else { @@ -1288,13 +1371,14 @@ }, expandCollapseSonNode: function (setting, node, expandFlag, animateFlag, callback) { var root = data.getRoot(setting), - treeNodes = (node) ? data.nodeChildren(setting, node) : data.nodeChildren(setting, root), - selfAnimateSign = (node) ? false : animateFlag, + treeNodes = node ? data.nodeChildren(setting, node) : data.nodeChildren(setting, root), + selfAnimateSign = node ? false : animateFlag, expandTriggerFlag = data.getRoot(setting).expandTriggerFlag; data.getRoot(setting).expandTriggerFlag = false; if (treeNodes) { for (var i = 0, l = treeNodes.length; i < l; i++) { - if (treeNodes[i]) view.expandCollapseSonNode(setting, treeNodes[i], expandFlag, selfAnimateSign); + if (treeNodes[i]) + view.expandCollapseSonNode(setting, treeNodes[i], expandFlag, selfAnimateSign); } } data.getRoot(setting).expandTriggerFlag = expandTriggerFlag; @@ -1315,21 +1399,53 @@ }, makeDOMNodeIcon: function (html, setting, node) { var nameStr = data.nodeName(setting, node), - name = setting.view.nameIsHTML ? nameStr : nameStr.replace(/&/g, '&').replace(//g, '>'); - html.push("", name, ""); + name = setting.view.nameIsHTML + ? nameStr + : nameStr.replace(/&/g, "&").replace(//g, ">"); + html.push( + "", + name, + "" + ); }, makeDOMNodeLine: function (html, setting, node) { - html.push(""); + html.push( + "" + ); }, makeDOMNodeMainAfter: function (html, setting, node) { html.push(""); }, makeDOMNodeMainBefore: function (html, setting, node) { - html.push("
  • "); + html.push( + "
  • " + ); }, makeDOMNodeNameAfter: function (html, setting, node) { html.push(""); @@ -1343,24 +1459,36 @@ for (var f in fontcss) { fontStyle.push(f, ":", fontcss[f], ";"); } - html.push(" 0) ? " href='" + url + "'" : ""), " target='", view.makeNodeTarget(node), "' style='", fontStyle.join(''), - "'"); + html.push( + " 0 ? " href='" + url + "'" : "", + " target='", + view.makeNodeTarget(node), + "' style='", + fontStyle.join(""), + "'" + ); if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) { - html.push("title='", title.replace(/'/g, "'").replace(//g, '>'), "'"); + html.push("title='", title.replace(/'/g, "'").replace(//g, ">"), "'"); } html.push(">"); }, makeNodeFontCss: function (setting, node) { var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss); - return (fontCss && ((typeof fontCss) != "function")) ? fontCss : {}; + return fontCss && typeof fontCss != "function" ? fontCss : {}; }, makeNodeClasses: function (setting, node) { var classes = tools.apply(setting.view.nodeClasses, [setting.treeId, node], setting.view.nodeClasses); - return (classes && (typeof classes !== "function")) ? classes : { add: [], remove: [] }; + return classes && typeof classes !== "function" ? classes : { add: [], remove: [] }; }, makeNodeIcoClass: function (setting, node) { var icoCss = ["ico"]; @@ -1373,19 +1501,27 @@ icoCss.push(consts.folder.DOCU); } } - return "x-icon b-font " + consts.className.ICON + " " + icoCss.join('_'); + return "x-icon b-font " + consts.className.ICON + " " + icoCss.join("_"); }, makeNodeIcoStyle: function (setting, node) { var icoStyle = []; if (!node.isAjaxing) { var isParent = data.nodeIsParent(setting, node); - var icon = (isParent && node.iconOpen && node.iconClose) ? (node.open ? node.iconOpen : node.iconClose) : node[setting.data.key.icon]; + var icon = + isParent && node.iconOpen && node.iconClose + ? node.open + ? node.iconOpen + : node.iconClose + : node[setting.data.key.icon]; if (icon) icoStyle.push("background:url(", icon, ") 0 0 no-repeat;"); - if (setting.view.showIcon == false || !tools.apply(setting.view.showIcon, [setting.treeId, node], true)) { + if ( + setting.view.showIcon == false || + !tools.apply(setting.view.showIcon, [setting.treeId, node], true) + ) { icoStyle.push("display:none;"); } } - return icoStyle.join(''); + return icoStyle.join(""); }, makeNodeLineClass: function (setting, node) { var lineClass = []; @@ -1407,25 +1543,45 @@ } else { lineClass.push(consts.folder.DOCU); } - return view.makeNodeLineClassEx(node) + lineClass.join('_'); + return view.makeNodeLineClassEx(node) + lineClass.join("_"); }, makeNodeLineClassEx: function (node) { - return consts.className.BUTTON + " " + consts.className.LEVEL + node.level + " " + consts.className.SWITCH + " "; + return ( + consts.className.BUTTON + + " " + + consts.className.LEVEL + + node.level + + " " + + consts.className.SWITCH + + " " + ); }, makeNodeTarget: function (node) { - return (node.target || "_blank"); + return node.target || "_blank"; }, makeNodeUrl: function (setting, node) { var urlKey = setting.data.key.url; return node[urlKey] ? node[urlKey] : null; }, makeUlHtml: function (setting, node, html, content) { - html.push("
      "); + html.push( + "
        " + ); html.push(content); html.push("
      "); }, makeUlLineClass: function (setting, node) { - return ((setting.view.showLine && !node.isLastNode) ? consts.line.LINE : ""); + return setting.view.showLine && !node.isLastNode ? consts.line.LINE : ""; }, removeChildNodes: function (setting, node) { if (!node) return; @@ -1455,11 +1611,15 @@ return; } // support IE 7 / 8 - if (typeof Element === 'undefined' || typeof HTMLElement === 'undefined') { + if (typeof Element === "undefined" || typeof HTMLElement === "undefined") { var contRect = setting.treeObj.get(0).getBoundingClientRect(), findMeRect = dom.getBoundingClientRect(); - if (findMeRect.top < contRect.top || findMeRect.bottom > contRect.bottom - || findMeRect.right > contRect.right || findMeRect.left < contRect.left) { + if ( + findMeRect.top < contRect.top || + findMeRect.bottom > contRect.bottom || + findMeRect.right > contRect.right || + findMeRect.left < contRect.left + ) { dom.scrollIntoView(); } return; @@ -1470,29 +1630,23 @@ "use strict"; function makeRange(start, length) { - return { "start": start, "length": length, "end": start + length }; + return { start: start, length: length, end: start + length }; } function coverRange(inner, outer) { - if ( - false === centerIfNeeded || - (outer.start < inner.end && inner.start < outer.end) - ) { - return Math.max( - inner.end - outer.length, - Math.min(outer.start, inner.start) - ); + if (false === centerIfNeeded || (outer.start < inner.end && inner.start < outer.end)) { + return Math.max(inner.end - outer.length, Math.min(outer.start, inner.start)); } return (inner.start + inner.end - outer.length) / 2; } function makePoint(x, y) { return { - "x": x, - "y": y, - "translate": function translate(dX, dY) { + x: x, + y: y, + translate: function translate(dX, dY) { return makePoint(x + dX, y + dY); - } + }, }; } @@ -1543,7 +1697,7 @@ }, removeNode: function (setting, node) { var root = data.getRoot(setting), - parentNode = (node.parentTId) ? node.getParentNode() : root; + parentNode = node.parentTId ? node.getParentNode() : root; node.isFirstNode = false; node.isLastNode = false; @@ -1572,7 +1726,9 @@ view.setFirstNode(setting, parentNode); view.setLastNode(setting, parentNode); - var tmp_ulObj, tmp_switchObj, tmp_icoObj, + var tmp_ulObj, + tmp_switchObj, + tmp_icoObj, childLength = children.length; //repair nodes old parent @@ -1587,7 +1743,6 @@ view.replaceSwitchClass(parentNode, tmp_switchObj, consts.folder.DOCU); view.replaceIcoClass(parentNode, tmp_icoObj, consts.folder.DOCU); tmp_ulObj.css("display", "none"); - } else if (setting.view.showLine && childLength > 0) { //old parentNode has child nodes var newLast = children[childLength - 1]; @@ -1667,11 +1822,11 @@ setNodeClasses: function (setting, treeNode) { var aObj = $$(treeNode, consts.id.A, setting), classes = view.makeNodeClasses(setting, treeNode); - if ('add' in classes && classes.add.length) { - aObj.addClass(classes.add.join(' ')); + if ("add" in classes && classes.add.length) { + aObj.addClass(classes.add.join(" ")); } - if ('remove' in classes && classes.remove.length) { - aObj.removeClass(classes.remove.join(' ')); + if ("remove" in classes && classes.remove.length) { + aObj.removeClass(classes.remove.join(" ")); } }, setNodeLineIcos: function (setting, node) { @@ -1733,7 +1888,7 @@ } else if (node) { view.expandCollapseNode(setting, node, !node.open); } - } + }, }; // zTree defind $.fn.zTree = { @@ -1742,7 +1897,7 @@ tools: tools, view: view, event: event, - data: data + data: data, }, getZTreeObj: function (treeId) { var o = data.getZTreeTools(treeId); @@ -1800,11 +1955,10 @@ } if (!newNodes) return null; - var xNewNodes = tools.clone(tools.isArray(newNodes) ? newNodes : [newNodes]); function addCallback() { - view.addNodes(setting, parentNode, index, xNewNodes, (isSilent == true)); + view.addNodes(setting, parentNode, index, xNewNodes, isSilent == true); } if (tools.canAsync(setting, parentNode)) { @@ -1832,9 +1986,17 @@ } callbackFlag = !!callbackFlag; - if (callbackFlag && expandFlag && (tools.apply(setting.callback.beforeExpand, [setting.treeId, node], true) == false)) { + if ( + callbackFlag && + expandFlag && + tools.apply(setting.callback.beforeExpand, [setting.treeId, node], true) == false + ) { return null; - } else if (callbackFlag && !expandFlag && (tools.apply(setting.callback.beforeCollapse, [setting.treeId, node], true) == false)) { + } else if ( + callbackFlag && + !expandFlag && + tools.apply(setting.callback.beforeCollapse, [setting.treeId, node], true) == false + ) { return null; } if (expandFlag && node.parentTId) { @@ -1866,27 +2028,48 @@ }, getNodeByParam: function (key, value, parentNode) { if (!key) return null; - return data.getNodeByParam(setting, parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), key, value); + return data.getNodeByParam( + setting, + parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), + key, + value + ); }, getNodeByTId: function (tId) { return data.getNodeCache(setting, tId); }, getNodesByParam: function (key, value, parentNode) { if (!key) return null; - return data.getNodesByParam(setting, parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), key, value); + return data.getNodesByParam( + setting, + parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), + key, + value + ); }, getNodesByParamFuzzy: function (key, value, parentNode) { if (!key) return null; - return data.getNodesByParamFuzzy(setting, parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), key, value); + return data.getNodesByParamFuzzy( + setting, + parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), + key, + value + ); }, getNodesByFilter: function (filter, isSingle, parentNode, invokeParam) { isSingle = !!isSingle; - if (!filter || (typeof filter != "function")) return (isSingle ? null : []); - return data.getNodesByFilter(setting, parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), filter, isSingle, invokeParam); + if (!filter || typeof filter != "function") return isSingle ? null : []; + return data.getNodesByFilter( + setting, + parentNode ? data.nodeChildren(setting, parentNode) : data.getNodes(setting), + filter, + isSingle, + invokeParam + ); }, getNodeIndex: function (node) { if (!node) return null; - var parentNode = (node.parentTId) ? node.getParentNode() : data.getRoot(setting); + var parentNode = node.parentTId ? node.getParentNode() : data.getRoot(setting); var children = data.nodeChildren(setting, parentNode); for (var i = 0, l = children.length; i < l; i++) { if (children[i] == node) return i; @@ -1894,7 +2077,8 @@ return -1; }, getSelectedNodes: function () { - var r = [], list = data.getRoot(setting).curSelectedList; + var r = [], + list = data.getRoot(setting).curSelectedList; for (var i = 0, l = list.length; i < l; i++) { r.push(list[i]); } @@ -1955,7 +2139,11 @@ removeNode: function (node, callbackFlag) { if (!node) return; callbackFlag = !!callbackFlag; - if (callbackFlag && tools.apply(setting.callback.beforeRemove, [setting.treeId, node], true) == false) return; + if ( + callbackFlag && + tools.apply(setting.callback.beforeRemove, [setting.treeId, node], true) == false + ) + return; view.removeNode(setting, node); if (callbackFlag) { this.setting.treeObj.trigger(consts.event.REMOVE, [setting.treeId, node]); @@ -1970,8 +2158,7 @@ } else if (!isSilent) { try { $$(node, setting).focus().blur(); - } catch (e) { - } + } catch (e) {} } view.selectNode(setting, node, addFlag); } @@ -2001,18 +2188,18 @@ view.setNodeFontCss(setting, node); view.setNodeClasses(setting, node); } - } + }, }; root.treeTools = zTreeTools; data.setZTreeTools(setting, zTreeTools); var children = data.nodeChildren(setting, root); if (children && children.length > 0) { view.createNodes(setting, 0, children, null, -1); - } else if (setting.async.enable && setting.async.url && setting.async.url !== '') { + } else if (setting.async.enable && setting.async.url && setting.async.url !== "") { view.asyncNode(setting); } return zTreeTools; - } + }, }; var zt = $.fn.zTree, diff --git a/src/case/ztree/jquery.ztree.excheck-3.5.js b/src/case/ztree/jquery.ztree.excheck-3.5.js index ea1f6a945..685938c55 100644 --- a/src/case/ztree/jquery.ztree.excheck-3.5.js +++ b/src/case/ztree/jquery.ztree.excheck-3.5.js @@ -12,640 +12,710 @@ * Date: 2015-06-18 */ (function ($) { - //default consts of excheck - var _consts = { - event: { - CHECK: "ztree_check" - }, - id: { - CHECK: "_check" - }, - checkbox: { - STYLE: "checkbox", - DEFAULT: "chk", - DISABLED: "disable", - FALSE: "false", - TRUE: "true", - FULL: "full", - PART: "part", - FOCUS: "focus" - }, - radio: { - STYLE: "radio", - TYPE_ALL: "all", - TYPE_LEVEL: "level" - } - }, - //default setting of excheck - _setting = { - check: { - enable: false, - autoCheckTrigger: false, - chkStyle: _consts.checkbox.STYLE, - nocheckInherit: false, - chkDisabledInherit: false, - radioType: _consts.radio.TYPE_LEVEL, - chkboxType: { - "Y": "ps", - "N": "ps" - } - }, - data: { - key: { - checked: "checked" - } - }, - callback: { - beforeCheck: null, - onCheck: null - } - }, - //default root of excheck - _initRoot = function (setting) { - var r = data.getRoot(setting); - r.radioCheckedList = []; - }, - //default cache of excheck - _initCache = function (treeId) { - }, - //default bind event of excheck - _bindEvent = function (setting) { - var o = setting.treeObj, - c = consts.event; - o.bind(c.CHECK, function (event, srcEvent, treeId, node) { - event.srcEvent = srcEvent; - tools.apply(setting.callback.onCheck, [event, treeId, node]); - }); - }, - _unbindEvent = function (setting) { - var o = setting.treeObj, - c = consts.event; - o.unbind(c.CHECK); - }, - //default event proxy of excheck - _eventProxy = function (e) { - var target = e.target, - setting = data.getSetting(e.data.treeId), - tId = "", node = null, - nodeEventType = "", treeEventType = "", - nodeEventCallback = null, treeEventCallback = null; + //default consts of excheck + var _consts = { + event: { + CHECK: "ztree_check", + }, + id: { + CHECK: "_check", + }, + checkbox: { + STYLE: "checkbox", + DEFAULT: "chk", + DISABLED: "disable", + FALSE: "false", + TRUE: "true", + FULL: "full", + PART: "part", + FOCUS: "focus", + }, + radio: { + STYLE: "radio", + TYPE_ALL: "all", + TYPE_LEVEL: "level", + }, + }, + //default setting of excheck + _setting = { + check: { + enable: false, + autoCheckTrigger: false, + chkStyle: _consts.checkbox.STYLE, + nocheckInherit: false, + chkDisabledInherit: false, + radioType: _consts.radio.TYPE_LEVEL, + chkboxType: { + Y: "ps", + N: "ps", + }, + }, + data: { + key: { + checked: "checked", + }, + }, + callback: { + beforeCheck: null, + onCheck: null, + }, + }, + //default root of excheck + _initRoot = function (setting) { + var r = data.getRoot(setting); + r.radioCheckedList = []; + }, + //default cache of excheck + _initCache = function (treeId) {}, + //default bind event of excheck + _bindEvent = function (setting) { + var o = setting.treeObj, + c = consts.event; + o.bind(c.CHECK, function (event, srcEvent, treeId, node) { + event.srcEvent = srcEvent; + tools.apply(setting.callback.onCheck, [event, treeId, node]); + }); + }, + _unbindEvent = function (setting) { + var o = setting.treeObj, + c = consts.event; + o.unbind(c.CHECK); + }, + //default event proxy of excheck + _eventProxy = function (e) { + var target = e.target, + setting = data.getSetting(e.data.treeId), + tId = "", + node = null, + nodeEventType = "", + treeEventType = "", + nodeEventCallback = null, + treeEventCallback = null; - if (tools.eqs(e.type, "mouseover")) { - if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode" + consts.id.CHECK) !== null) { - tId = tools.getNodeMainDom(target).id; - nodeEventType = "mouseoverCheck"; - } - } else if (tools.eqs(e.type, "mouseout")) { - if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode" + consts.id.CHECK) !== null) { - tId = tools.getNodeMainDom(target).id; - nodeEventType = "mouseoutCheck"; - } - } else if (tools.eqs(e.type, "click")) { - if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode" + consts.id.CHECK) !== null) { - tId = tools.getNodeMainDom(target).id; - nodeEventType = "checkNode"; - } - } - if (tId.length > 0) { - node = data.getNodeCache(setting, tId); - switch (nodeEventType) { - case "checkNode" : - nodeEventCallback = _handler.onCheckNode; - break; - case "mouseoverCheck" : - nodeEventCallback = _handler.onMouseoverCheck; - break; - case "mouseoutCheck" : - nodeEventCallback = _handler.onMouseoutCheck; - break; - } - } - var proxyResult = { - stop: nodeEventType === "checkNode", - node: node, - nodeEventType: nodeEventType, - nodeEventCallback: nodeEventCallback, - treeEventType: treeEventType, - treeEventCallback: treeEventCallback - }; - return proxyResult; - }, - //default init node of excheck - _initNode = function (setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) { - if (!n) return; - var checkedKey = setting.data.key.checked; - if (typeof n[checkedKey] == "string") n[checkedKey] = tools.eqs(n[checkedKey], "true"); - n[checkedKey] = !!n[checkedKey]; - n.checkedOld = n[checkedKey]; - if (typeof n.nocheck == "string") n.nocheck = tools.eqs(n.nocheck, "true"); - n.nocheck = !!n.nocheck || (setting.check.nocheckInherit && parentNode && !!parentNode.nocheck); - if (typeof n.chkDisabled == "string") n.chkDisabled = tools.eqs(n.chkDisabled, "true"); - n.chkDisabled = !!n.chkDisabled || (setting.check.chkDisabledInherit && parentNode && !!parentNode.chkDisabled); - if (typeof n.halfCheck == "string") n.halfCheck = tools.eqs(n.halfCheck, "true"); - n.halfCheck = !!n.halfCheck; - n.check_Child_State = -1; - n.check_Focus = false; - n.getCheckStatus = function () { - return data.getCheckStatus(setting, n); - }; + if (tools.eqs(e.type, "mouseover")) { + if ( + setting.check.enable && + tools.eqs(target.tagName, "span") && + target.getAttribute("treeNode" + consts.id.CHECK) !== null + ) { + tId = tools.getNodeMainDom(target).id; + nodeEventType = "mouseoverCheck"; + } + } else if (tools.eqs(e.type, "mouseout")) { + if ( + setting.check.enable && + tools.eqs(target.tagName, "span") && + target.getAttribute("treeNode" + consts.id.CHECK) !== null + ) { + tId = tools.getNodeMainDom(target).id; + nodeEventType = "mouseoutCheck"; + } + } else if (tools.eqs(e.type, "click")) { + if ( + setting.check.enable && + tools.eqs(target.tagName, "span") && + target.getAttribute("treeNode" + consts.id.CHECK) !== null + ) { + tId = tools.getNodeMainDom(target).id; + nodeEventType = "checkNode"; + } + } + if (tId.length > 0) { + node = data.getNodeCache(setting, tId); + switch (nodeEventType) { + case "checkNode": + nodeEventCallback = _handler.onCheckNode; + break; + case "mouseoverCheck": + nodeEventCallback = _handler.onMouseoverCheck; + break; + case "mouseoutCheck": + nodeEventCallback = _handler.onMouseoutCheck; + break; + } + } + var proxyResult = { + stop: nodeEventType === "checkNode", + node: node, + nodeEventType: nodeEventType, + nodeEventCallback: nodeEventCallback, + treeEventType: treeEventType, + treeEventCallback: treeEventCallback, + }; + return proxyResult; + }, + //default init node of excheck + _initNode = function (setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) { + if (!n) return; + var checkedKey = setting.data.key.checked; + if (typeof n[checkedKey] == "string") n[checkedKey] = tools.eqs(n[checkedKey], "true"); + n[checkedKey] = !!n[checkedKey]; + n.checkedOld = n[checkedKey]; + if (typeof n.nocheck == "string") n.nocheck = tools.eqs(n.nocheck, "true"); + n.nocheck = !!n.nocheck || (setting.check.nocheckInherit && parentNode && !!parentNode.nocheck); + if (typeof n.chkDisabled == "string") n.chkDisabled = tools.eqs(n.chkDisabled, "true"); + n.chkDisabled = + !!n.chkDisabled || (setting.check.chkDisabledInherit && parentNode && !!parentNode.chkDisabled); + if (typeof n.halfCheck == "string") n.halfCheck = tools.eqs(n.halfCheck, "true"); + n.halfCheck = !!n.halfCheck; + n.check_Child_State = -1; + n.check_Focus = false; + n.getCheckStatus = function () { + return data.getCheckStatus(setting, n); + }; - if (setting.check.chkStyle == consts.radio.STYLE && setting.check.radioType == consts.radio.TYPE_ALL && n[checkedKey]) { - var r = data.getRoot(setting); - r.radioCheckedList.push(n); - } - }, - //add dom for check - _beforeA = function (setting, node, html) { - var checkedKey = setting.data.key.checked; - if (setting.check.enable) { - data.makeChkFlag(setting, node); - html.push(""); - } - }, - //update zTreeObj, add method of check - _zTreeTools = function (setting, zTreeTools) { - zTreeTools.checkNode = function (node, checked, checkTypeFlag, callbackFlag) { - var checkedKey = this.setting.data.key.checked; - if (node.chkDisabled === true) return; - if (checked !== true && checked !== false) { - checked = !node[checkedKey]; - } - callbackFlag = !!callbackFlag; + if ( + setting.check.chkStyle == consts.radio.STYLE && + setting.check.radioType == consts.radio.TYPE_ALL && + n[checkedKey] + ) { + var r = data.getRoot(setting); + r.radioCheckedList.push(n); + } + }, + //add dom for check + _beforeA = function (setting, node, html) { + var checkedKey = setting.data.key.checked; + if (setting.check.enable) { + data.makeChkFlag(setting, node); + html.push( + "" + ); + } + }, + //update zTreeObj, add method of check + _zTreeTools = function (setting, zTreeTools) { + zTreeTools.checkNode = function (node, checked, checkTypeFlag, callbackFlag) { + var checkedKey = this.setting.data.key.checked; + if (node.chkDisabled === true) return; + if (checked !== true && checked !== false) { + checked = !node[checkedKey]; + } + callbackFlag = !!callbackFlag; - if (node[checkedKey] === checked && !checkTypeFlag) { - return; - } else if (callbackFlag && tools.apply(this.setting.callback.beforeCheck, [this.setting.treeId, node], true) == false) { - return; - } - if (tools.uCanDo(this.setting) && this.setting.check.enable && node.nocheck !== true) { - node[checkedKey] = checked; - var checkObj = $$(node, consts.id.CHECK, this.setting); - if (checkTypeFlag || this.setting.check.chkStyle === consts.radio.STYLE) view.checkNodeRelation(this.setting, node); - view.setChkClass(this.setting, checkObj, node); - view.repairParentChkClassWithSelf(this.setting, node); - if (callbackFlag) { - this.setting.treeObj.trigger(consts.event.CHECK, [null, this.setting.treeId, node]); - } - } - }; + if (node[checkedKey] === checked && !checkTypeFlag) { + return; + } else if ( + callbackFlag && + tools.apply(this.setting.callback.beforeCheck, [this.setting.treeId, node], true) == false + ) { + return; + } + if (tools.uCanDo(this.setting) && this.setting.check.enable && node.nocheck !== true) { + node[checkedKey] = checked; + var checkObj = $$(node, consts.id.CHECK, this.setting); + if (checkTypeFlag || this.setting.check.chkStyle === consts.radio.STYLE) + view.checkNodeRelation(this.setting, node); + view.setChkClass(this.setting, checkObj, node); + view.repairParentChkClassWithSelf(this.setting, node); + if (callbackFlag) { + this.setting.treeObj.trigger(consts.event.CHECK, [null, this.setting.treeId, node]); + } + } + }; - zTreeTools.checkAllNodes = function (checked) { - view.repairAllChk(this.setting, !!checked); - }; + zTreeTools.checkAllNodes = function (checked) { + view.repairAllChk(this.setting, !!checked); + }; - zTreeTools.getCheckedNodes = function (checked) { - var childKey = this.setting.data.key.children; - checked = (checked !== false); - return data.getTreeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey], checked); - }; + zTreeTools.getCheckedNodes = function (checked) { + var childKey = this.setting.data.key.children; + checked = checked !== false; + return data.getTreeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey], checked); + }; - zTreeTools.getChangeCheckedNodes = function () { - var childKey = this.setting.data.key.children; - return data.getTreeChangeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey]); - }; + zTreeTools.getChangeCheckedNodes = function () { + var childKey = this.setting.data.key.children; + return data.getTreeChangeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey]); + }; - zTreeTools.setChkDisabled = function (node, disabled, inheritParent, inheritChildren) { - disabled = !!disabled; - inheritParent = !!inheritParent; - inheritChildren = !!inheritChildren; - view.repairSonChkDisabled(this.setting, node, disabled, inheritChildren); - view.repairParentChkDisabled(this.setting, node.getParentNode(), disabled, inheritParent); - }; + zTreeTools.setChkDisabled = function (node, disabled, inheritParent, inheritChildren) { + disabled = !!disabled; + inheritParent = !!inheritParent; + inheritChildren = !!inheritChildren; + view.repairSonChkDisabled(this.setting, node, disabled, inheritChildren); + view.repairParentChkDisabled(this.setting, node.getParentNode(), disabled, inheritParent); + }; - var _updateNode = zTreeTools.updateNode; - zTreeTools.updateNode = function (node, checkTypeFlag) { - if (_updateNode) _updateNode.apply(zTreeTools, arguments); - if (!node || !this.setting.check.enable) return; - var nObj = $$(node, this.setting); - if (nObj.get(0) && tools.uCanDo(this.setting)) { - var checkObj = $$(node, consts.id.CHECK, this.setting); - if (checkTypeFlag == true || this.setting.check.chkStyle === consts.radio.STYLE) view.checkNodeRelation(this.setting, node); - view.setChkClass(this.setting, checkObj, node); - view.repairParentChkClassWithSelf(this.setting, node); - } - }; - }, - //method of operate data - _data = { - getRadioCheckedList: function (setting) { - var checkedList = data.getRoot(setting).radioCheckedList; - for (var i = 0, j = checkedList.length; i < j; i++) { - if (!data.getNodeCache(setting, checkedList[i].tId)) { - checkedList.splice(i, 1); - i--; - j--; - } - } - return checkedList; - }, - getCheckStatus: function (setting, node) { - if (!setting.check.enable || node.nocheck || node.chkDisabled) return null; - var checkedKey = setting.data.key.checked, - r = { - checked: node[checkedKey], - half: node.halfCheck ? node.halfCheck : (setting.check.chkStyle == consts.radio.STYLE ? (node.check_Child_State === 2) : (node[checkedKey] ? (node.check_Child_State > -1 && node.check_Child_State < 2) : (node.check_Child_State > 0))) - }; - return r; - }, - getTreeCheckedNodes: function (setting, nodes, checked, results) { - if (!nodes) return []; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - onlyOne = (checked && setting.check.chkStyle == consts.radio.STYLE && setting.check.radioType == consts.radio.TYPE_ALL); - results = !results ? [] : results; - for (var i = 0, l = nodes.length; i < l; i++) { - if (nodes[i].nocheck !== true && nodes[i].chkDisabled !== true && nodes[i][checkedKey] == checked) { - results.push(nodes[i]); - if (onlyOne) { - break; - } - } - data.getTreeCheckedNodes(setting, nodes[i][childKey], checked, results); - if (onlyOne && results.length > 0) { - break; - } - } - return results; - }, - getTreeChangeCheckedNodes: function (setting, nodes, results) { - if (!nodes) return []; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked; - results = !results ? [] : results; - for (var i = 0, l = nodes.length; i < l; i++) { - if (nodes[i].nocheck !== true && nodes[i].chkDisabled !== true && nodes[i][checkedKey] != nodes[i].checkedOld) { - results.push(nodes[i]); - } - data.getTreeChangeCheckedNodes(setting, nodes[i][childKey], results); - } - return results; - }, - makeChkFlag: function (setting, node) { - if (!node) return; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - chkFlag = -1; - if (node[childKey]) { - for (var i = 0, l = node[childKey].length; i < l; i++) { - var cNode = node[childKey][i]; - var tmp = -1; - if (setting.check.chkStyle == consts.radio.STYLE) { - if (cNode.nocheck === true || cNode.chkDisabled === true) { - tmp = cNode.check_Child_State; - } else if (cNode.halfCheck === true) { - tmp = 2; - } else if (cNode[checkedKey]) { - tmp = 2; - } else { - tmp = cNode.check_Child_State > 0 ? 2 : 0; - } - if (tmp == 2) { - chkFlag = 2; - break; - } else if (tmp == 0) { - chkFlag = 0; - } - } else if (setting.check.chkStyle == consts.checkbox.STYLE) { - if (cNode.nocheck === true || cNode.chkDisabled === true) { - tmp = cNode.check_Child_State; - } else if (cNode.halfCheck === true) { - tmp = 1; - } else if (cNode[checkedKey]) { - tmp = (cNode.check_Child_State === -1 || cNode.check_Child_State === 2) ? 2 : 1; - } else { - tmp = (cNode.check_Child_State > 0) ? 1 : 0; - } - if (tmp === 1) { - chkFlag = 1; - break; - } else if (tmp === 2 && chkFlag > -1 && i > 0 && tmp !== chkFlag) { - chkFlag = 1; - break; - } else if (chkFlag === 2 && tmp > -1 && tmp < 2) { - chkFlag = 1; - break; - } else if (tmp > -1) { - chkFlag = tmp; - } - } - } - } - node.check_Child_State = chkFlag; - } - }, - //method of event proxy - _event = {}, - //method of event handler - _handler = { - onCheckNode: function (event, node) { - if (node.chkDisabled === true) return false; - var setting = data.getSetting(event.data.treeId), - checkedKey = setting.data.key.checked; - if (tools.apply(setting.callback.beforeCheck, [setting.treeId, node], true) == false) return true; - node[checkedKey] = !node[checkedKey]; - view.checkNodeRelation(setting, node); - var checkObj = $$(node, consts.id.CHECK, setting); - view.setChkClass(setting, checkObj, node); - view.repairParentChkClassWithSelf(setting, node); - setting.treeObj.trigger(consts.event.CHECK, [event, setting.treeId, node]); - return true; - }, - onMouseoverCheck: function (event, node) { - if (node.chkDisabled === true) return false; - var setting = data.getSetting(event.data.treeId), - checkObj = $$(node, consts.id.CHECK, setting); - node.check_Focus = true; - view.setChkClass(setting, checkObj, node); - return true; - }, - onMouseoutCheck: function (event, node) { - if (node.chkDisabled === true) return false; - var setting = data.getSetting(event.data.treeId), - checkObj = $$(node, consts.id.CHECK, setting); - node.check_Focus = false; - view.setChkClass(setting, checkObj, node); - return true; - } - }, - //method of tools for zTree - _tools = {}, - //method of operate ztree dom - _view = { - checkNodeRelation: function (setting, node) { - var pNode, i, l, - childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - r = consts.radio; - if (setting.check.chkStyle == r.STYLE) { - var checkedList = data.getRadioCheckedList(setting); - if (node[checkedKey]) { - if (setting.check.radioType == r.TYPE_ALL) { - for (i = checkedList.length - 1; i >= 0; i--) { - pNode = checkedList[i]; - if (pNode[checkedKey] && pNode != node) { - pNode[checkedKey] = false; - checkedList.splice(i, 1); + var _updateNode = zTreeTools.updateNode; + zTreeTools.updateNode = function (node, checkTypeFlag) { + if (_updateNode) _updateNode.apply(zTreeTools, arguments); + if (!node || !this.setting.check.enable) return; + var nObj = $$(node, this.setting); + if (nObj.get(0) && tools.uCanDo(this.setting)) { + var checkObj = $$(node, consts.id.CHECK, this.setting); + if (checkTypeFlag == true || this.setting.check.chkStyle === consts.radio.STYLE) + view.checkNodeRelation(this.setting, node); + view.setChkClass(this.setting, checkObj, node); + view.repairParentChkClassWithSelf(this.setting, node); + } + }; + }, + //method of operate data + _data = { + getRadioCheckedList: function (setting) { + var checkedList = data.getRoot(setting).radioCheckedList; + for (var i = 0, j = checkedList.length; i < j; i++) { + if (!data.getNodeCache(setting, checkedList[i].tId)) { + checkedList.splice(i, 1); + i--; + j--; + } + } + return checkedList; + }, + getCheckStatus: function (setting, node) { + if (!setting.check.enable || node.nocheck || node.chkDisabled) return null; + var checkedKey = setting.data.key.checked, + r = { + checked: node[checkedKey], + half: node.halfCheck + ? node.halfCheck + : setting.check.chkStyle == consts.radio.STYLE + ? node.check_Child_State === 2 + : node[checkedKey] + ? node.check_Child_State > -1 && node.check_Child_State < 2 + : node.check_Child_State > 0, + }; + return r; + }, + getTreeCheckedNodes: function (setting, nodes, checked, results) { + if (!nodes) return []; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + onlyOne = + checked && + setting.check.chkStyle == consts.radio.STYLE && + setting.check.radioType == consts.radio.TYPE_ALL; + results = !results ? [] : results; + for (var i = 0, l = nodes.length; i < l; i++) { + if (nodes[i].nocheck !== true && nodes[i].chkDisabled !== true && nodes[i][checkedKey] == checked) { + results.push(nodes[i]); + if (onlyOne) { + break; + } + } + data.getTreeCheckedNodes(setting, nodes[i][childKey], checked, results); + if (onlyOne && results.length > 0) { + break; + } + } + return results; + }, + getTreeChangeCheckedNodes: function (setting, nodes, results) { + if (!nodes) return []; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked; + results = !results ? [] : results; + for (var i = 0, l = nodes.length; i < l; i++) { + if ( + nodes[i].nocheck !== true && + nodes[i].chkDisabled !== true && + nodes[i][checkedKey] != nodes[i].checkedOld + ) { + results.push(nodes[i]); + } + data.getTreeChangeCheckedNodes(setting, nodes[i][childKey], results); + } + return results; + }, + makeChkFlag: function (setting, node) { + if (!node) return; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + chkFlag = -1; + if (node[childKey]) { + for (var i = 0, l = node[childKey].length; i < l; i++) { + var cNode = node[childKey][i]; + var tmp = -1; + if (setting.check.chkStyle == consts.radio.STYLE) { + if (cNode.nocheck === true || cNode.chkDisabled === true) { + tmp = cNode.check_Child_State; + } else if (cNode.halfCheck === true) { + tmp = 2; + } else if (cNode[checkedKey]) { + tmp = 2; + } else { + tmp = cNode.check_Child_State > 0 ? 2 : 0; + } + if (tmp == 2) { + chkFlag = 2; + break; + } else if (tmp == 0) { + chkFlag = 0; + } + } else if (setting.check.chkStyle == consts.checkbox.STYLE) { + if (cNode.nocheck === true || cNode.chkDisabled === true) { + tmp = cNode.check_Child_State; + } else if (cNode.halfCheck === true) { + tmp = 1; + } else if (cNode[checkedKey]) { + tmp = cNode.check_Child_State === -1 || cNode.check_Child_State === 2 ? 2 : 1; + } else { + tmp = cNode.check_Child_State > 0 ? 1 : 0; + } + if (tmp === 1) { + chkFlag = 1; + break; + } else if (tmp === 2 && chkFlag > -1 && i > 0 && tmp !== chkFlag) { + chkFlag = 1; + break; + } else if (chkFlag === 2 && tmp > -1 && tmp < 2) { + chkFlag = 1; + break; + } else if (tmp > -1) { + chkFlag = tmp; + } + } + } + } + node.check_Child_State = chkFlag; + }, + }, + //method of event proxy + _event = {}, + //method of event handler + _handler = { + onCheckNode: function (event, node) { + if (node.chkDisabled === true) return false; + var setting = data.getSetting(event.data.treeId), + checkedKey = setting.data.key.checked; + if (tools.apply(setting.callback.beforeCheck, [setting.treeId, node], true) == false) return true; + node[checkedKey] = !node[checkedKey]; + view.checkNodeRelation(setting, node); + var checkObj = $$(node, consts.id.CHECK, setting); + view.setChkClass(setting, checkObj, node); + view.repairParentChkClassWithSelf(setting, node); + setting.treeObj.trigger(consts.event.CHECK, [event, setting.treeId, node]); + return true; + }, + onMouseoverCheck: function (event, node) { + if (node.chkDisabled === true) return false; + var setting = data.getSetting(event.data.treeId), + checkObj = $$(node, consts.id.CHECK, setting); + node.check_Focus = true; + view.setChkClass(setting, checkObj, node); + return true; + }, + onMouseoutCheck: function (event, node) { + if (node.chkDisabled === true) return false; + var setting = data.getSetting(event.data.treeId), + checkObj = $$(node, consts.id.CHECK, setting); + node.check_Focus = false; + view.setChkClass(setting, checkObj, node); + return true; + }, + }, + //method of tools for zTree + _tools = {}, + //method of operate ztree dom + _view = { + checkNodeRelation: function (setting, node) { + var pNode, + i, + l, + childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + r = consts.radio; + if (setting.check.chkStyle == r.STYLE) { + var checkedList = data.getRadioCheckedList(setting); + if (node[checkedKey]) { + if (setting.check.radioType == r.TYPE_ALL) { + for (i = checkedList.length - 1; i >= 0; i--) { + pNode = checkedList[i]; + if (pNode[checkedKey] && pNode != node) { + pNode[checkedKey] = false; + checkedList.splice(i, 1); - view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); - if (pNode.parentTId != node.parentTId) { - view.repairParentChkClassWithSelf(setting, pNode); - } - } - } - checkedList.push(node); - } else { - var parentNode = (node.parentTId) ? node.getParentNode() : data.getRoot(setting); - for (i = 0, l = parentNode[childKey].length; i < l; i++) { - pNode = parentNode[childKey][i]; - if (pNode[checkedKey] && pNode != node) { - pNode[checkedKey] = false; - view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); - } - } - } - } else if (setting.check.radioType == r.TYPE_ALL) { - for (i = 0, l = checkedList.length; i < l; i++) { - if (node == checkedList[i]) { - checkedList.splice(i, 1); - break; - } - } - } + view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); + if (pNode.parentTId != node.parentTId) { + view.repairParentChkClassWithSelf(setting, pNode); + } + } + } + checkedList.push(node); + } else { + var parentNode = node.parentTId ? node.getParentNode() : data.getRoot(setting); + for (i = 0, l = parentNode[childKey].length; i < l; i++) { + pNode = parentNode[childKey][i]; + if (pNode[checkedKey] && pNode != node) { + pNode[checkedKey] = false; + view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); + } + } + } + } else if (setting.check.radioType == r.TYPE_ALL) { + for (i = 0, l = checkedList.length; i < l; i++) { + if (node == checkedList[i]) { + checkedList.splice(i, 1); + break; + } + } + } + } else { + if ( + node[checkedKey] && + (!node[childKey] || node[childKey].length == 0 || setting.check.chkboxType.Y.indexOf("s") > -1) + ) { + view.setSonNodeCheckBox(setting, node, true); + } + if ( + !node[checkedKey] && + (!node[childKey] || node[childKey].length == 0 || setting.check.chkboxType.N.indexOf("s") > -1) + ) { + view.setSonNodeCheckBox(setting, node, false); + } + if (node[checkedKey] && setting.check.chkboxType.Y.indexOf("p") > -1) { + view.setParentNodeCheckBox(setting, node, true); + } + if (!node[checkedKey] && setting.check.chkboxType.N.indexOf("p") > -1) { + view.setParentNodeCheckBox(setting, node, false); + } + } + }, + makeChkClass: function (setting, node) { + var checkedKey = setting.data.key.checked, + c = consts.checkbox, + r = consts.radio, + checkboxType = setting.check.chkboxType; + var notEffectByOtherNode = checkboxType.Y === "" && checkboxType.N === ""; + fullStyle = ""; + if (node.chkDisabled === true) { + fullStyle = c.DISABLED; + } else if (node.halfCheck) { + fullStyle = c.PART; + } else if (setting.check.chkStyle == r.STYLE) { + fullStyle = node.check_Child_State < 1 ? c.FULL : c.PART; + } else { + fullStyle = node[checkedKey] + ? node.check_Child_State === 2 || node.check_Child_State === -1 || notEffectByOtherNode + ? c.FULL + : c.PART + : node.check_Child_State < 1 || notEffectByOtherNode + ? c.FULL + : c.PART; + } + var chkName = setting.check.chkStyle + "_" + (node[checkedKey] ? c.TRUE : c.FALSE) + "_" + fullStyle; + chkName = node.check_Focus && node.chkDisabled !== true ? chkName + "_" + c.FOCUS : chkName; + var chClass = consts.className.BUTTON + " " + c.DEFAULT + " " + chkName; + switch (chkName) { + case "checkbox_true_part": + case "checkbox_true_part_focus": + chClass += " bi-half-button bi-high-light-border"; + break; + case "checkbox_true_full": + case "checkbox_true_full_focus": + chClass += " bi-checkbox checkbox-content bi-high-light-background active"; + break; + case "checkbox_false_full": + case "checkbox_false_full_focus": + default: + chClass += " bi-checkbox checkbox-content"; + break; + } + return chClass + (node.disabled ? " disabled" : ""); + }, + repairAllChk: function (setting, checked) { + if (setting.check.enable && setting.check.chkStyle === consts.checkbox.STYLE) { + var checkedKey = setting.data.key.checked, + childKey = setting.data.key.children, + root = data.getRoot(setting); + for (var i = 0, l = root[childKey].length; i < l; i++) { + var node = root[childKey][i]; + if (node.nocheck !== true && node.chkDisabled !== true) { + node[checkedKey] = checked; + } + view.setSonNodeCheckBox(setting, node, checked); + } + } + }, + repairChkClass: function (setting, node) { + if (!node) return; + data.makeChkFlag(setting, node); + if (node.nocheck !== true) { + var checkObj = $$(node, consts.id.CHECK, setting); + view.setChkClass(setting, checkObj, node); + } + }, + repairParentChkClass: function (setting, node) { + if (!node || !node.parentTId) return; + var pNode = node.getParentNode(); + view.repairChkClass(setting, pNode); + view.repairParentChkClass(setting, pNode); + }, + repairParentChkClassWithSelf: function (setting, node) { + if (!node) return; + var childKey = setting.data.key.children; + if (node[childKey] && node[childKey].length > 0) { + view.repairParentChkClass(setting, node[childKey][0]); + } else { + view.repairParentChkClass(setting, node); + } + }, + repairSonChkDisabled: function (setting, node, chkDisabled, inherit) { + if (!node) return; + var childKey = setting.data.key.children; + if (node.chkDisabled != chkDisabled) { + node.chkDisabled = chkDisabled; + } + view.repairChkClass(setting, node); + if (node[childKey] && inherit) { + for (var i = 0, l = node[childKey].length; i < l; i++) { + var sNode = node[childKey][i]; + view.repairSonChkDisabled(setting, sNode, chkDisabled, inherit); + } + } + }, + repairParentChkDisabled: function (setting, node, chkDisabled, inherit) { + if (!node) return; + if (node.chkDisabled != chkDisabled && inherit) { + node.chkDisabled = chkDisabled; + } + view.repairChkClass(setting, node); + view.repairParentChkDisabled(setting, node.getParentNode(), chkDisabled, inherit); + }, + setChkClass: function (setting, obj, node) { + if (!obj) return; + if (node.nocheck === true) { + obj.hide(); + } else { + obj.show(); + } + obj.attr("class", view.makeChkClass(setting, node)); + }, + setParentNodeCheckBox: function (setting, node, value, srcNode) { + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + checkObj = $$(node, consts.id.CHECK, setting); + if (!srcNode) srcNode = node; + data.makeChkFlag(setting, node); + if (node.nocheck !== true && node.chkDisabled !== true) { + node[checkedKey] = value; + view.setChkClass(setting, checkObj, node); + if (setting.check.autoCheckTrigger && node != srcNode) { + setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); + } + } + if (node.parentTId) { + var pSign = true; + if (!value) { + var pNodes = node.getParentNode()[childKey]; + for (var i = 0, l = pNodes.length; i < l; i++) { + if ( + (pNodes[i].nocheck !== true && + pNodes[i].chkDisabled !== true && + pNodes[i][checkedKey]) || + ((pNodes[i].nocheck === true || pNodes[i].chkDisabled === true) && + pNodes[i].check_Child_State > 0) + ) { + pSign = false; + break; + } + } + } + if (pSign) { + view.setParentNodeCheckBox(setting, node.getParentNode(), value, srcNode); + } + } + }, + setSonNodeCheckBox: function (setting, node, value, srcNode) { + if (!node) return; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + checkObj = $$(node, consts.id.CHECK, setting); + if (!srcNode) srcNode = node; - } else { - if (node[checkedKey] && (!node[childKey] || node[childKey].length == 0 || setting.check.chkboxType.Y.indexOf("s") > -1)) { - view.setSonNodeCheckBox(setting, node, true); - } - if (!node[checkedKey] && (!node[childKey] || node[childKey].length == 0 || setting.check.chkboxType.N.indexOf("s") > -1)) { - view.setSonNodeCheckBox(setting, node, false); - } - if (node[checkedKey] && setting.check.chkboxType.Y.indexOf("p") > -1) { - view.setParentNodeCheckBox(setting, node, true); - } - if (!node[checkedKey] && setting.check.chkboxType.N.indexOf("p") > -1) { - view.setParentNodeCheckBox(setting, node, false); - } - } - }, - makeChkClass: function (setting, node) { - var checkedKey = setting.data.key.checked, - c = consts.checkbox, r = consts.radio, - checkboxType = setting.check.chkboxType; - var notEffectByOtherNode = (checkboxType.Y === "" && checkboxType.N === ""); - fullStyle = ""; - if (node.chkDisabled === true) { - fullStyle = c.DISABLED; - } else if (node.halfCheck) { - fullStyle = c.PART; - } else if (setting.check.chkStyle == r.STYLE) { - fullStyle = (node.check_Child_State < 1) ? c.FULL : c.PART; - } else { - fullStyle = node[checkedKey] ? ((node.check_Child_State === 2 || node.check_Child_State === -1) || notEffectByOtherNode ? c.FULL : c.PART) : ((node.check_Child_State < 1 || notEffectByOtherNode) ? c.FULL : c.PART); - } - var chkName = setting.check.chkStyle + "_" + (node[checkedKey] ? c.TRUE : c.FALSE) + "_" + fullStyle; - chkName = (node.check_Focus && node.chkDisabled !== true) ? chkName + "_" + c.FOCUS : chkName; - var chClass = consts.className.BUTTON + " " + c.DEFAULT + " " + chkName; - switch (chkName) { - case 'checkbox_true_part': - case 'checkbox_true_part_focus': - chClass += ' bi-half-button bi-high-light-border'; - break; - case 'checkbox_true_full': - case 'checkbox_true_full_focus': - chClass += ' bi-checkbox checkbox-content bi-high-light-background active'; - break; - case 'checkbox_false_full': - case 'checkbox_false_full_focus': - default: - chClass += ' bi-checkbox checkbox-content'; - break; - } - return chClass + (node.disabled ? " disabled" : ""); - }, - repairAllChk: function (setting, checked) { - if (setting.check.enable && setting.check.chkStyle === consts.checkbox.STYLE) { - var checkedKey = setting.data.key.checked, - childKey = setting.data.key.children, - root = data.getRoot(setting); - for (var i = 0, l = root[childKey].length; i < l; i++) { - var node = root[childKey][i]; - if (node.nocheck !== true && node.chkDisabled !== true) { - node[checkedKey] = checked; - } - view.setSonNodeCheckBox(setting, node, checked); - } - } - }, - repairChkClass: function (setting, node) { - if (!node) return; - data.makeChkFlag(setting, node); - if (node.nocheck !== true) { - var checkObj = $$(node, consts.id.CHECK, setting); - view.setChkClass(setting, checkObj, node); - } - }, - repairParentChkClass: function (setting, node) { - if (!node || !node.parentTId) return; - var pNode = node.getParentNode(); - view.repairChkClass(setting, pNode); - view.repairParentChkClass(setting, pNode); - }, - repairParentChkClassWithSelf: function (setting, node) { - if (!node) return; - var childKey = setting.data.key.children; - if (node[childKey] && node[childKey].length > 0) { - view.repairParentChkClass(setting, node[childKey][0]); - } else { - view.repairParentChkClass(setting, node); - } - }, - repairSonChkDisabled: function (setting, node, chkDisabled, inherit) { - if (!node) return; - var childKey = setting.data.key.children; - if (node.chkDisabled != chkDisabled) { - node.chkDisabled = chkDisabled; - } - view.repairChkClass(setting, node); - if (node[childKey] && inherit) { - for (var i = 0, l = node[childKey].length; i < l; i++) { - var sNode = node[childKey][i]; - view.repairSonChkDisabled(setting, sNode, chkDisabled, inherit); - } - } - }, - repairParentChkDisabled: function (setting, node, chkDisabled, inherit) { - if (!node) return; - if (node.chkDisabled != chkDisabled && inherit) { - node.chkDisabled = chkDisabled; - } - view.repairChkClass(setting, node); - view.repairParentChkDisabled(setting, node.getParentNode(), chkDisabled, inherit); - }, - setChkClass: function (setting, obj, node) { - if (!obj) return; - if (node.nocheck === true) { - obj.hide(); - } else { - obj.show(); - } - obj.attr('class', view.makeChkClass(setting, node)); - }, - setParentNodeCheckBox: function (setting, node, value, srcNode) { - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - checkObj = $$(node, consts.id.CHECK, setting); - if (!srcNode) srcNode = node; - data.makeChkFlag(setting, node); - if (node.nocheck !== true && node.chkDisabled !== true) { - node[checkedKey] = value; - view.setChkClass(setting, checkObj, node); - if (setting.check.autoCheckTrigger && node != srcNode) { - setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); - } - } - if (node.parentTId) { - var pSign = true; - if (!value) { - var pNodes = node.getParentNode()[childKey]; - for (var i = 0, l = pNodes.length; i < l; i++) { - if ((pNodes[i].nocheck !== true && pNodes[i].chkDisabled !== true && pNodes[i][checkedKey]) - || ((pNodes[i].nocheck === true || pNodes[i].chkDisabled === true) && pNodes[i].check_Child_State > 0)) { - pSign = false; - break; - } - } - } - if (pSign) { - view.setParentNodeCheckBox(setting, node.getParentNode(), value, srcNode); - } - } - }, - setSonNodeCheckBox: function (setting, node, value, srcNode) { - if (!node) return; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - checkObj = $$(node, consts.id.CHECK, setting); - if (!srcNode) srcNode = node; + var hasDisable = false; + if (node[childKey]) { + for (var i = 0, l = node[childKey].length; i < l && node.chkDisabled !== true; i++) { + var sNode = node[childKey][i]; + view.setSonNodeCheckBox(setting, sNode, value, srcNode); + if (sNode.chkDisabled === true) hasDisable = true; + } + } - var hasDisable = false; - if (node[childKey]) { - for (var i = 0, l = node[childKey].length; i < l && node.chkDisabled !== true; i++) { - var sNode = node[childKey][i]; - view.setSonNodeCheckBox(setting, sNode, value, srcNode); - if (sNode.chkDisabled === true) hasDisable = true; - } - } + if (node != data.getRoot(setting) && node.chkDisabled !== true) { + if (hasDisable && node.nocheck !== true) { + data.makeChkFlag(setting, node); + } + if (node.nocheck !== true && node.chkDisabled !== true) { + node[checkedKey] = value; + if (!hasDisable) + node.check_Child_State = node[childKey] && node[childKey].length > 0 ? (value ? 2 : 0) : -1; + } else { + node.check_Child_State = -1; + } + view.setChkClass(setting, checkObj, node); + if ( + setting.check.autoCheckTrigger && + node != srcNode && + node.nocheck !== true && + node.chkDisabled !== true + ) { + setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); + } + } + }, + }, + _z = { + tools: _tools, + view: _view, + event: _event, + data: _data, + }; + $.extend(true, $.fn.zTree.consts, _consts); + $.extend(true, $.fn.zTree._z, _z); - if (node != data.getRoot(setting) && node.chkDisabled !== true) { - if (hasDisable && node.nocheck !== true) { - data.makeChkFlag(setting, node); - } - if (node.nocheck !== true && node.chkDisabled !== true) { - node[checkedKey] = value; - if (!hasDisable) node.check_Child_State = (node[childKey] && node[childKey].length > 0) ? (value ? 2 : 0) : -1; - } else { - node.check_Child_State = -1; - } - view.setChkClass(setting, checkObj, node); - if (setting.check.autoCheckTrigger && node != srcNode && node.nocheck !== true && node.chkDisabled !== true) { - setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); - } - } + var zt = $.fn.zTree, + tools = zt._z.tools, + consts = zt.consts, + view = zt._z.view, + data = zt._z.data, + event = zt._z.event, + $$ = tools.$; - } - }, + data.exSetting(_setting); + data.addInitBind(_bindEvent); + data.addInitUnBind(_unbindEvent); + data.addInitCache(_initCache); + data.addInitNode(_initNode); + data.addInitProxy(_eventProxy, true); + data.addInitRoot(_initRoot); + data.addBeforeA(_beforeA); + data.addZTreeTools(_zTreeTools); - _z = { - tools: _tools, - view: _view, - event: _event, - data: _data - }; - $.extend(true, $.fn.zTree.consts, _consts); - $.extend(true, $.fn.zTree._z, _z); + var _createNodes = view.createNodes; + view.createNodes = function (setting, level, nodes, parentNode) { + if (_createNodes) _createNodes.apply(view, arguments); + if (!nodes) return; + view.repairParentChkClassWithSelf(setting, parentNode); + }; + var _removeNode = view.removeNode; + view.removeNode = function (setting, node) { + var parentNode = node.getParentNode(); + if (_removeNode) _removeNode.apply(view, arguments); + if (!node || !parentNode) return; + view.repairChkClass(setting, parentNode); + view.repairParentChkClass(setting, parentNode); + }; - var zt = $.fn.zTree, - tools = zt._z.tools, - consts = zt.consts, - view = zt._z.view, - data = zt._z.data, - event = zt._z.event, - $$ = tools.$; - - data.exSetting(_setting); - data.addInitBind(_bindEvent); - data.addInitUnBind(_unbindEvent); - data.addInitCache(_initCache); - data.addInitNode(_initNode); - data.addInitProxy(_eventProxy, true); - data.addInitRoot(_initRoot); - data.addBeforeA(_beforeA); - data.addZTreeTools(_zTreeTools); - - var _createNodes = view.createNodes; - view.createNodes = function (setting, level, nodes, parentNode) { - if (_createNodes) _createNodes.apply(view, arguments); - if (!nodes) return; - view.repairParentChkClassWithSelf(setting, parentNode); - }; - var _removeNode = view.removeNode; - view.removeNode = function (setting, node) { - var parentNode = node.getParentNode(); - if (_removeNode) _removeNode.apply(view, arguments); - if (!node || !parentNode) return; - view.repairChkClass(setting, parentNode); - view.repairParentChkClass(setting, parentNode); - }; - - var _appendNodes = view.appendNodes; - view.appendNodes = function (setting, level, nodes, parentNode, initFlag, openFlag) { - var html = ""; - if (_appendNodes) { - html = _appendNodes.apply(view, arguments); - } - if (parentNode) { - data.makeChkFlag(setting, parentNode); - } - return html; - }; + var _appendNodes = view.appendNodes; + view.appendNodes = function (setting, level, nodes, parentNode, initFlag, openFlag) { + var html = ""; + if (_appendNodes) { + html = _appendNodes.apply(view, arguments); + } + if (parentNode) { + data.makeChkFlag(setting, parentNode); + } + return html; + }; })(BI.jQuery); diff --git a/src/case/ztree/list/listasynctree.js b/src/case/ztree/list/listasynctree.js index 019e7f4be..3ace3c8a7 100644 --- a/src/case/ztree/list/listasynctree.js +++ b/src/case/ztree/list/listasynctree.js @@ -1,3 +1,6 @@ +import { Listtreeview } from "./listtreeview"; +import { cjkEncodeDO, delay, isEmpty, shortcut, extend } from "@/core"; + /** * author: windy * 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 @@ -6,9 +9,6 @@ * @extends TreeView */ -import { Listtreeview } from "./listtreeview"; -import { cjkEncodeDO, delay, isEmpty, shortcut, extend } from "@/core"; - @shortcut() export class Listasynctree extends Listtreeview { static xtype = "bi.list_async_tree"; @@ -72,7 +72,8 @@ export class Listasynctree extends Listtreeview { // 展开节点 _beforeExpandNode(treeId, treeNode) { - const self = this, o = this.options; + const self = this, + o = this.options; const parentValues = treeNode.parentValues || self._getParentValues(treeNode); const op = extend({}, o.paras, { id: treeNode.id, @@ -85,7 +86,7 @@ export class Listasynctree extends Listtreeview { if (nodes.length > 0) { callback(self._dealWidthNodes(nodes), !!d.hasNext); } - }; + } let times = 1; function callback(nodes, hasNext) { @@ -119,4 +120,3 @@ export class Listasynctree extends Listtreeview { this._initTree(setting); } } - diff --git a/src/case/ztree/list/listparttree.js b/src/case/ztree/list/listparttree.js index dd908c36f..19a97b4c6 100644 --- a/src/case/ztree/list/listparttree.js +++ b/src/case/ztree/list/listparttree.js @@ -1,3 +1,7 @@ +import { Listasynctree } from "./listasynctree"; +import { shortcut, extend, Events, delay } from "@/core"; +import { TreeView } from "../treeview"; + /** * guy * 局部树，两个请求树， 第一个请求构造树，第二个请求获取节点 @@ -5,24 +9,21 @@ * @extends Asynctree */ - -import { Listasynctree } from "./listasynctree"; -import { shortcut, extend, Events, delay } from "@/core"; -import { TreeView } from "../treeview"; - @shortcut() export class ListPartTree extends Listasynctree { static xtype = "bi.list_part_tree"; _loadMore() { - const self = this, o = this.options; + const self = this, + o = this.options; const op = extend({}, o.paras, { type: TreeView.REQ_TYPE_INIT_DATA, times: ++this.times, }); this.tip.setLoading(); o.itemsCreator(op, d => { - const hasNext = !!d.hasNext, nodes = d.items || []; + const hasNext = !!d.hasNext, + nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; if (self._stop === true) { return; @@ -39,7 +40,8 @@ export class ListPartTree extends Listasynctree { } _initTree(setting, keyword) { - const self = this, o = this.options; + const self = this, + o = this.options; this.times = 1; const tree = this.tree; tree.empty(); @@ -54,7 +56,8 @@ export class ListPartTree extends Listasynctree { if (self._stop === true || keyword !== o.paras.keyword) { return; } - const hasNext = !!d.hasNext, nodes = d.items || []; + const hasNext = !!d.hasNext, + nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; // 没有请求到数据也要初始化空树, 如果不初始化, 树就是上一次构造的树, 节点信息都是过期的 callback(nodes.length > 0 ? self._dealWidthNodes(nodes) : []); diff --git a/src/case/ztree/list/listtreeview.js b/src/case/ztree/list/listtreeview.js index b31e93869..96d731f08 100644 --- a/src/case/ztree/list/listtreeview.js +++ b/src/case/ztree/list/listtreeview.js @@ -1,3 +1,6 @@ +import { TreeView } from "../treeview"; +import { extend, isNotNull, concat, each, shortcut } from "@/core"; + /** * author: windy * 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 @@ -6,9 +9,6 @@ * @extends BI.TreeView */ -import { TreeView } from "../treeview"; -import { extend, isNotNull, concat, each, shortcut } from "@/core"; - @shortcut() export class Listtreeview extends TreeView { static xtype = "bi.list_tree_view"; diff --git a/src/case/ztree/parttree.js b/src/case/ztree/parttree.js index f66c14920..dce82a093 100644 --- a/src/case/ztree/parttree.js +++ b/src/case/ztree/parttree.js @@ -1,12 +1,13 @@ +import { isEmpty, shortcut, extend, deepClone, each, isNotEmptyArray, Events, delay, isNull } from "@/core"; +import { Asynctree } from "./asynctree"; +import { TreeView } from "./treeview"; + /** * guy * 局部树，两个请求树， 第一个请求构造树，第二个请求获取节点 * @class BI.PartTree * @extends BI.AsyncTree */ -import { isEmpty, shortcut, extend, deepClone, each, isNotEmptyArray, Events, delay, isNull } from "@/core"; -import { Asynctree } from "./asynctree"; -import { TreeView } from "./treeview"; @shortcut() export class PartTree extends Asynctree { @@ -20,14 +21,16 @@ export class PartTree extends Asynctree { } _loadMore() { - const self = this, o = this.options; + const self = this, + o = this.options; const op = extend({}, o.paras, { type: TreeView.REQ_TYPE_INIT_DATA, times: ++this.times, }); this.tip.setLoading(); o.itemsCreator(op, d => { - const hasNext = !!d.hasNext, nodes = d.items || []; + const hasNext = !!d.hasNext, + nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; if (self._stop === true) { return; @@ -44,7 +47,8 @@ export class PartTree extends Asynctree { } _selectTreeNode(...args) { - const self = this, o = this.options; + const self = this, + o = this.options; const [treeId, treeNode] = args; const parentValues = deepClone(treeNode.parentValues || self._getParentValues(treeNode)); const name = this._getNodeValue(treeNode); @@ -52,14 +56,17 @@ export class PartTree extends Asynctree { if (treeNode.checked === true) { this.options.paras.selectedValues = this._getUnionValue(); // this._buildTree(self.options.paras.selectedValues, concat(parentValues, name)); - o.itemsCreator(extend({}, o.paras, { - type: TreeView.REQ_TYPE_ADJUST_DATA, - curSelectedValue: name, - parentValues, - }), function (res) { - self.options.paras.selectedValues = res; - this.seMethos(...args); - }); + o.itemsCreator( + extend({}, o.paras, { + type: TreeView.REQ_TYPE_ADJUST_DATA, + curSelectedValue: name, + parentValues, + }), + function (res) { + self.options.paras.selectedValues = res; + this.seMethos(...args); + } + ); } else { // 如果选中的值中不存在该值不处理 // 因为反正是不选中，没必要管 @@ -75,14 +82,17 @@ export class PartTree extends Asynctree { break; } } - o.itemsCreator(extend({}, o.paras, { - type: TreeView.REQ_TYPE_SELECT_DATA, - notSelectedValue: name, - parentValues, - }), new_values => { - self.options.paras.selectedValues = new_values; - this.seMethos(...args); - }); + o.itemsCreator( + extend({}, o.paras, { + type: TreeView.REQ_TYPE_SELECT_DATA, + notSelectedValue: name, + parentValues, + }), + new_values => { + self.options.paras.selectedValues = new_values; + this.seMethos(...args); + } + ); } } @@ -120,7 +130,8 @@ export class PartTree extends Asynctree { } _initTree(setting, keyword) { - const self = this, o = this.options; + const self = this, + o = this.options; this.times = 1; const tree = this.tree; tree.empty(); @@ -135,7 +146,8 @@ export class PartTree extends Asynctree { if (self._stop === true || keyword !== o.paras.keyword) { return; } - const hasNext = !!d.hasNext, nodes = d.items || []; + const hasNext = !!d.hasNext, + nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; // 没有请求到数据也要初始化空树, 如果不初始化, 树就是上一次构造的树, 节点信息都是过期的 callback(nodes.length > 0 ? self._dealWidthNodes(nodes) : []); diff --git a/src/case/ztree/tree.display.js b/src/case/ztree/tree.display.js index a385d58c6..c6f090544 100644 --- a/src/case/ztree/tree.display.js +++ b/src/case/ztree/tree.display.js @@ -1,3 +1,6 @@ +import { extend } from "@/core"; +import { TreeView } from "./treeview"; + /** * guy * 异步树 @@ -5,9 +8,6 @@ * @extends BI.TreeView */ -import { extend } from "@/core"; -import { TreeView } from "./treeview"; - export class DisplayTree extends TreeView { static xtype = "bi.display_tree"; static EVENT_CHANGE = "EVENT_CHANGE"; @@ -53,7 +53,9 @@ export class DisplayTree extends TreeView { node.isParent = node.isParent || node.parent; if (node.text == null) { if (node.count > 0) { - node.text = `${node.value}(${BI.i18nText("BI-Basic_Altogether")}${node.count}${BI.i18nText("BI-Basic_Count")})`; + node.text = `${node.value}(${BI.i18nText("BI-Basic_Altogether")}${node.count}${BI.i18nText( + "BI-Basic_Count" + )})`; } } }); diff --git a/src/case/ztree/tree.list.display.js b/src/case/ztree/tree.list.display.js index a3769e898..918d451c8 100644 --- a/src/case/ztree/tree.list.display.js +++ b/src/case/ztree/tree.list.display.js @@ -1,11 +1,12 @@ +import { Listtreeview } from "./list/listtreeview"; +import { each, shortcut } from "@/core"; + /** * guy * 异步树 * @class BI.ListListDisplayTree * @extends BI.TreeView */ -import { Listtreeview } from "./list/listtreeview"; -import { each, shortcut } from "@/core"; @shortcut() export class ListDisplayTree extends Listtreeview { @@ -58,7 +59,9 @@ export class ListDisplayTree extends Listtreeview { node.isParent = node.isParent || node.parent; if (node.text == null) { if (node.count > 0) { - node.text = `${node.value}(${BI.i18nText("BI-Basic_Altogether")}${node.count}${BI.i18nText("BI-Basic_Count")})`; + node.text = `${node.value}(${BI.i18nText("BI-Basic_Altogether")}${node.count}${BI.i18nText( + "BI-Basic_Count" + )})`; } } }); diff --git a/src/case/ztree/tree.simple.js b/src/case/ztree/tree.simple.js index 1483a27a7..8740aaab7 100644 --- a/src/case/ztree/tree.simple.js +++ b/src/case/ztree/tree.simple.js @@ -1,10 +1,3 @@ -/** - * 简单的多选树 - * - * Created by GUY on 2016/2/16. - * @class SimpleTreeView - * @extends Widget - */ import { shortcut, Widget, @@ -19,6 +12,14 @@ import { } from "@/core"; import { TreeView } from "./treeview"; +/** + * 简单的多选树 + * + * Created by GUY on 2016/2/16. + * @class SimpleTreeView + * @extends Widget + */ + @shortcut() export class SimpleTreeView extends Widget { static xtype = "bi.simple_tree"; @@ -35,7 +36,8 @@ export class SimpleTreeView extends Widget { _init() { super._init(...arguments); - const self = this, o = this.options; + const self = this, + o = this.options; this.structure = new Tree(); this.tree = createWidget({ type: TreeView.xtype, @@ -46,7 +48,7 @@ export class SimpleTreeView extends Widget { items, }); self.structure.initTree(Tree.transformToTreeFormat(items)); - }; + } if (isNotNull(o.items)) { fn(o.items); } else { @@ -76,7 +78,8 @@ export class SimpleTreeView extends Widget { _digest(v) { v || (v = []); - const self = this, map = {}; + const self = this, + map = {}; const selected = []; each(v, (i, val) => { const node = self.structure.search(val, "value"); @@ -111,7 +114,8 @@ export class SimpleTreeView extends Widget { } _getValue() { - const result = [], val = this.tree.getValue(); + const result = [], + val = this.tree.getValue(); function track(nodes) { each(nodes, (key, node) => { @@ -121,7 +125,7 @@ export class SimpleTreeView extends Widget { track(node); } }); - }; + } track(val); return result; @@ -132,7 +136,9 @@ export class SimpleTreeView extends Widget { } getValue() { - const self = this, result = [], val = this._getValue(); + const self = this, + result = [], + val = this._getValue(); each(val, (i, key) => { const target = self.structure.search(key, "value"); if (target) { diff --git a/src/case/ztree/treerender.page.service.js b/src/case/ztree/treerender.page.service.js index 56112c217..799829a93 100644 --- a/src/case/ztree/treerender.page.service.js +++ b/src/case/ztree/treerender.page.service.js @@ -1,3 +1,6 @@ +import { createWidget, debounce, has, OB, size, each, VerticalLayout } from "@/core"; +import { LoadingBar } from "@/base"; + /** * @author windy * @version 2.0 @@ -5,9 +8,6 @@ * 提供节点分页加载方式 */ -import { createWidget, debounce, has, OB, size, each, VerticalLayout } from "@/core"; -import { LoadingBar } from "@/base"; - export class TreeRenderPageService extends OB { nodeLists = {}; diff --git a/src/case/ztree/treerender.scroll.service.js b/src/case/ztree/treerender.scroll.service.js index ffd5ea289..fed397a9c 100644 --- a/src/case/ztree/treerender.scroll.service.js +++ b/src/case/ztree/treerender.scroll.service.js @@ -1,3 +1,5 @@ +import { debounce, each, has, isNotNull, OB, size } from "@/core"; + /** * @author windy * @version 2.0 @@ -5,8 +7,6 @@ * 提供节点滚动加载方式 */ -import { debounce, each, has, isNotNull, OB, size } from "@/core"; - export class TreeRenderScrollService extends OB { _init() { this.nodeLists = {}; @@ -51,7 +51,7 @@ export class TreeRenderScrollService extends OB { // 是否需要继续加载，只需要看子节点列表的下边界与container是否无交集 const bounds = this._getNodeListBounds(tId); const containerBounds = this._getTreeContainerBounds(tId); - + // ul底部是不是漏出来了 return bounds.top + bounds.height < containerBounds.top + containerBounds.height; } @@ -80,9 +80,13 @@ export class TreeRenderScrollService extends OB { if (!this.hasBinded) { // console.log("绑定事件"); this.hasBinded = true; - this.container && this.container.on("scroll", debounce(() => { - self.refreshAllNodes(); - }, 30)); + this.container && + this.container.on( + "scroll", + debounce(() => { + self.refreshAllNodes(); + }, 30) + ); } } diff --git a/src/case/ztree/treeview.js b/src/case/ztree/treeview.js index 33ee57363..df4009092 100644 --- a/src/case/ztree/treeview.js +++ b/src/case/ztree/treeview.js @@ -8,9 +8,19 @@ import { UUID, isNotNull, jsonEncode, - delay, each, replaceAll, - isUndefined, isNotEmptyArray, deepClone, map, Tree, - isNull, shortcut, VerticalLayout, Layout, DefaultLayout + delay, + each, + replaceAll, + isUndefined, + isNotEmptyArray, + deepClone, + map, + Tree, + isNull, + shortcut, + VerticalLayout, + Layout, + DefaultLayout } from "@/core"; import { Msg, Pane, LoadingBar, Text } from "@/base"; @@ -69,7 +79,9 @@ export class TreeView extends Pane { } this.tree = createWidget({ type: Layout.xtype, - element: ``, + element: `
        `, }); createWidget({ type: DefaultLayout.xtype, @@ -126,7 +138,8 @@ export class TreeView extends Pane { onClick, }, }; - const className = "dark", perTime = 100; + const className = "dark", + perTime = 100; function onClick(event, treeId, treeNode) { // 当前点击节点的状态是半选，且为true_part, 则将其改为false_part,使得点击半选后切换到的是全选 @@ -142,10 +155,9 @@ export class TreeView extends Pane { function getUrl(treeId, treeNode) { const parentNode = self._getParentValues(treeNode); treeNode.times = treeNode.times || 1; - const param = `id=${treeNode.id - }×=${treeNode.times++ - }&parentValues= ${_global.encodeURIComponent(jsonEncode(parentNode)) - }&checkState=${_global.encodeURIComponent(jsonEncode(treeNode.getCheckStatus()))}`; + const param = `id=${treeNode.id}×=${treeNode.times++}&parentValues= ${_global.encodeURIComponent( + jsonEncode(parentNode) + )}&checkState=${_global.encodeURIComponent(jsonEncode(treeNode.getCheckStatus()))}`; return `&${param}`; } @@ -247,8 +259,7 @@ export class TreeView extends Pane { treeNode.halfCheck = false; } - function onCollapse(event, treeId, treeNode) { - } + function onCollapse(event, treeId, treeNode) {} return setting; } @@ -362,7 +373,8 @@ export class TreeView extends Pane { // 处理节点 _dealWidthNodes(nodes) { - const self = this, o = this.options; + const self = this, + o = this.options; const ns = Tree.arrayFormat(nodes); return map(ns, (i, n) => { @@ -379,16 +391,22 @@ export class TreeView extends Pane { if (newNode.disabled) { newNode.title = newNode.warningTitle || newNode.title; } - const text = createWidget(extend({ - cls: "tree-node-text", - tagName: "span", - whiteSpace: "nowrap", - root: true, - keyword: o.paras.keyword, - }, newNode, { - type: Text.xtype, - text: replaceAll(newNode.text, "\n", " "), - })); + const text = createWidget( + extend( + { + cls: "tree-node-text", + tagName: "span", + whiteSpace: "nowrap", + root: true, + keyword: o.paras.keyword, + }, + newNode, + { + type: Text.xtype, + text: replaceAll(newNode.text, "\n", " "), + } + ) + ); const fragment = BI.Widget._renderEngine.createElement("
        "); fragment.append(text.element[0]); newNode.text = fragment.html(); @@ -406,7 +424,8 @@ export class TreeView extends Pane { } _loadMore() { - const self = this, o = this.options; + const self = this, + o = this.options; this.tip.setLoading(); const op = extend({}, o.paras, { times: ++this.times, @@ -415,7 +434,8 @@ export class TreeView extends Pane { if (self._stop === true) { return; } - const hasNext = !!res.hasNext, nodes = res.items || []; + const hasNext = !!res.hasNext, + nodes = res.items || []; if (!hasNext) { self.tip.setEnd(); @@ -430,7 +450,8 @@ export class TreeView extends Pane { // 生成树内部方法 _initTree(setting) { - const self = this, o = this.options; + const self = this, + o = this.options; self.fireEvent(Events.INIT); this.times = 1; const tree = this.tree; @@ -453,7 +474,8 @@ export class TreeView extends Pane { if (self._stop === true) { return; } - const hasNext = !!res.hasNext, nodes = res.items || []; + const hasNext = !!res.hasNext, + nodes = res.items || []; if (nodes.length > 0) { callback(self._dealWidthNodes(nodes)); } @@ -590,4 +612,3 @@ export class TreeView extends Pane { this.nodes && this.nodes.destroy(); } } - From 7129532c68ac3d954e853979cbfcd047caaf8412 Mon Sep 17 00:00:00 2001 From: Treecat Date: Mon, 16 Jan 2023 10:30:58 +0800 Subject: [PATCH 6/6] =?UTF-8?q?KERNEL-14076=20feat:=20=E8=84=9A=E6=9C=AC?= =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug=EF=BC=8C=E6=9C=89=E7=9A=84=E6=B2=A1?= =?UTF-8?q?=E6=9C=89xtype=EF=BC=8Cnull=20=E4=B9=9F=E6=98=AFobj=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/es6.js b/es6.js index 357bb92cc..40633a425 100644 --- a/es6.js +++ b/es6.js @@ -13,6 +13,10 @@ const ConflictImport = []; const CircularDependency = []; function objHaveFunction(obj) { + if (obj === null) { + return false; + } + return Object.keys(obj).some(key => { const value = obj[key]; if (typeof value === "object") { @@ -105,6 +109,7 @@ async function handleFile(srcName) { const sourceCode = fs.readFileSync(srcName).toString(); const result = /BI\.(.*?)\s=\sBI\.inherit\(/.exec(sourceCode); + if (!result) { // console.log(`已经es6过，替换 xtype => ${srcName}`); if (!/export class/.test(sourceCode)) { @@ -167,11 +172,13 @@ async function handleFile(srcName) { }); let circle = false; - // 处理循环依赖 + // 处理循环依赖，base: ["@/case", "@/base", "@/widget"] 等于 base 不能直接引数组内的包 const forbiddenCrossRules = { base: ["@/case", "@/base", "@/widget"], "case": ["@/case", "@/widget"], widget: ["@/widget"], + component: ["@/component"], + core: ["@/core", "@base", "@/widget", "@/case"], }; const forbiddenKeys = []; @@ -180,6 +187,7 @@ async function handleFile(srcName) { lodash.forEach(G, (depts, module) => { // 找出 rule const packages = Object.keys(forbiddenCrossRules); + let key = packages.filter( _package => srcName.indexOf(_package) >= 0, ); @@ -407,6 +415,10 @@ async function handleFile(srcName) { M += `${f}\n`; }); + if (!collection.xtype) { + delete G["@/core"].shortcut; + } + Object.keys(G).forEach(key => { let moduleKey = key; if (moduleKey === path.basename(srcName).replace(/.js$/g, "")) { @@ -429,9 +441,9 @@ async function handleFile(srcName) { const outputCode = ` ${I} -@shortcut() +${collection.xtype ? "@shortcut()" : ""} export class ${clzName} extends ${superName} { -\tstatic xtype = "${collection.xtype}" +${collection.xtype ? `static xtype = "${collection.xtype}"` : ""} ${A}