From 36d186f4c08b3776f8a4bdb3b43e98cf715c4d42 Mon Sep 17 00:00:00 2001 From: "crawford.zhou" Date: Wed, 11 Jan 2023 11:00:07 +0800 Subject: [PATCH 1/4] =?UTF-8?q?KERNEL-14067=20feat:checkbox=E7=9A=84es6?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/checkbox/check.arrownode.js | 26 +++++++++------ src/case/checkbox/check.checkingmarknode.js | 24 +++++++------ src/case/checkbox/check.first.treenode.js | 37 ++++++++++++--------- src/case/checkbox/check.last.treenode.js | 35 ++++++++++--------- src/case/checkbox/check.mid.treenode.js | 37 ++++++++++++--------- src/case/checkbox/check.treenode.js | 37 ++++++++++++--------- 6 files changed, 112 insertions(+), 84 deletions(-) diff --git a/src/case/checkbox/check.arrownode.js b/src/case/checkbox/check.arrownode.js index 3347f83d0..625e7a6e4 100644 --- a/src/case/checkbox/check.arrownode.js +++ b/src/case/checkbox/check.arrownode.js @@ -2,24 +2,28 @@ * Created by roy on 15/10/16. * 右与下箭头切换的树节点 */ -BI.ArrowTreeGroupNodeCheckbox = BI.inherit(BI.IconButton, { +import { shortcut } from "@/core"; +import { IconButton } from "@/base"; - props: function (conf) { +@shortcut() +export class ArrowTreeGroupNodeCheckbox extends IconButton { + static xtype = "bi.arrow_group_node_checkbox"; + + props(conf) { return { - extraCls: "bi-arrow-group-node-checkbox " + (conf.collapseIcon || "expander-right-font"), + extraCls: `bi-arrow-group-node-checkbox ${conf.collapseIcon || "expander-right-font"}`, expandIcon: "expander-down-font", - collapseIcon: "expander-right-font" + collapseIcon: "expander-right-font", }; - }, + } - setSelected: function (v) { - var o = this.options; - BI.ArrowTreeGroupNodeCheckbox.superclass.setSelected.apply(this, arguments); - if(v) { + setSelected(v) { + const o = this.options; + super.setSelected(...arguments); + if (v) { this.element.removeClass(o.collapseIcon).addClass(o.expandIcon); } else { this.element.removeClass(o.expandIcon).addClass(o.collapseIcon); } } -}); -BI.shortcut("bi.arrow_group_node_checkbox", BI.ArrowTreeGroupNodeCheckbox); +} diff --git a/src/case/checkbox/check.checkingmarknode.js b/src/case/checkbox/check.checkingmarknode.js index b3996691e..4f51a02c1 100644 --- a/src/case/checkbox/check.checkingmarknode.js +++ b/src/case/checkbox/check.checkingmarknode.js @@ -3,19 +3,23 @@ * @class BI.CheckingMarkNode * @extends BI.IconButton */ -BI.CheckingMarkNode = BI.inherit(BI.IconButton, { - _defaultConfig: function () { - return BI.extend( BI.CheckingMarkNode.superclass._defaultConfig.apply(this, arguments), { - }); - }, +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; - setSelected: function (v) { - BI.CheckingMarkNode.superclass.setSelected.apply(this, arguments); - if(v === true) { +@shortcut() +export class CheckingMarkNode extends IconButton { + static xtype = "bi.checking_mark_node"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), {}); + } + + setSelected(v) { + super.setSelected(...arguments); + if (v === true) { this.element.addClass("check-mark-font"); } else { this.element.removeClass("check-mark-font"); } } -}); -BI.shortcut("bi.checking_mark_node", BI.CheckingMarkNode); +} diff --git a/src/case/checkbox/check.first.treenode.js b/src/case/checkbox/check.first.treenode.js index aa808488f..bade32c4d 100644 --- a/src/case/checkbox/check.first.treenode.js +++ b/src/case/checkbox/check.first.treenode.js @@ -3,31 +3,36 @@ * @class BI.FirstTreeNodeCheckbox * @extends BI.IconButton */ -BI.FirstTreeNodeCheckbox = BI.inherit(BI.IconButton, { - _defaultConfig: function () { - return BI.extend( BI.FirstTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), { +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + +@shortcut() +export class FirstTreeNodeCheckbox extends IconButton { + static xtype = "bi.first_tree_node_checkbox"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2", iconWidth: 24, - iconHeight: 24 + iconHeight: 24, }); - }, + } - getLineCls: function () { + getLineCls() { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { - case "solid": - return "tree-solid-expand-icon-type2"; - default: - return "tree-expand-icon-type2"; + case "solid": + return "tree-solid-expand-icon-type2"; + default: + return "tree-expand-icon-type2"; } - }, + } - setSelected: function (v) { - BI.FirstTreeNodeCheckbox.superclass.setSelected.apply(this, arguments); - if(v === true) { + setSelected(v) { + super.setSelected(...arguments); + if (v === true) { this.element.addClass(this.getLineCls()); } else { this.element.removeClass(this.getLineCls()); } } -}); -BI.shortcut("bi.first_tree_node_checkbox", BI.FirstTreeNodeCheckbox); \ No newline at end of file +} diff --git a/src/case/checkbox/check.last.treenode.js b/src/case/checkbox/check.last.treenode.js index cb536f8cc..93ebc9c66 100644 --- a/src/case/checkbox/check.last.treenode.js +++ b/src/case/checkbox/check.last.treenode.js @@ -3,31 +3,36 @@ * @class BI.LastTreeNodeCheckbox * @extends BI.IconButton */ -BI.LastTreeNodeCheckbox = BI.inherit(BI.IconButton, { - _defaultConfig: function () { - return BI.extend(BI.LastTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), { +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + +@shortcut() +export class LastTreeNodeCheckbox extends IconButton { + static xtype = "bi.last_tree_node_checkbox"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4", iconWidth: 24, - iconHeight: 24 + iconHeight: 24, }); - }, + } - getLineCls: function () { + getLineCls() { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { - case "solid": - return "tree-solid-expand-icon-type4"; - default: - return "tree-expand-icon-type4"; + case "solid": + return "tree-solid-expand-icon-type4"; + default: + return "tree-expand-icon-type4"; } - }, + } - setSelected: function (v) { - BI.LastTreeNodeCheckbox.superclass.setSelected.apply(this, arguments); + setSelected(v) { + super.setSelected(...arguments); if (v === true) { this.element.addClass(this.getLineCls()); } else { this.element.removeClass(this.getLineCls()); } } -}); -BI.shortcut("bi.last_tree_node_checkbox", BI.LastTreeNodeCheckbox); \ No newline at end of file +} diff --git a/src/case/checkbox/check.mid.treenode.js b/src/case/checkbox/check.mid.treenode.js index 7ec4e5230..a9d44de0e 100644 --- a/src/case/checkbox/check.mid.treenode.js +++ b/src/case/checkbox/check.mid.treenode.js @@ -3,31 +3,36 @@ * @class BI.MidTreeNodeCheckbox * @extends BI.IconButton */ -BI.MidTreeNodeCheckbox = BI.inherit(BI.IconButton, { - _defaultConfig: function () { - return BI.extend( BI.MidTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), { +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + +@shortcut() +export class MidTreeNodeCheckbox extends IconButton { + static xtype = "bi.mid_tree_node_checkbox"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3", iconWidth: 24, - iconHeight: 24 + iconHeight: 24, }); - }, + } - getLineCls: function () { + getLineCls() { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { - case "solid": - return "tree-solid-expand-icon-type3"; - default: - return "tree-expand-icon-type3"; + case "solid": + return "tree-solid-expand-icon-type3"; + default: + return "tree-expand-icon-type3"; } - }, + } - setSelected: function (v) { - BI.MidTreeNodeCheckbox.superclass.setSelected.apply(this, arguments); - if(v === true) { + setSelected(v) { + super.setSelected(...arguments); + if (v === true) { this.element.addClass(this.getLineCls()); } else { this.element.removeClass(this.getLineCls()); } } -}); -BI.shortcut("bi.mid_tree_node_checkbox", BI.MidTreeNodeCheckbox); \ No newline at end of file +} diff --git a/src/case/checkbox/check.treenode.js b/src/case/checkbox/check.treenode.js index 128bb73c6..fa1b54404 100644 --- a/src/case/checkbox/check.treenode.js +++ b/src/case/checkbox/check.treenode.js @@ -3,31 +3,36 @@ * @class BI.TreeNodeCheckbox * @extends BI.IconButton */ -BI.TreeNodeCheckbox = BI.inherit(BI.IconButton, { - _defaultConfig: function () { - return BI.extend( BI.TreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), { +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", iconWidth: 24, - iconHeight: 24 + iconHeight: 24, }); - }, + } - getLineCls: function () { + getLineCls() { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { - case "solid": - return "tree-solid-expand-icon-type1"; - default: - return "tree-expand-icon-type1"; + case "solid": + return "tree-solid-expand-icon-type1"; + default: + return "tree-expand-icon-type1"; } - }, + } - setSelected: function (v) { - BI.TreeNodeCheckbox.superclass.setSelected.apply(this, arguments); - if(v) { + setSelected(v) { + super.setSelected(...arguments); + if (v) { this.element.addClass(this.getLineCls()); } else { this.element.removeClass(this.getLineCls()); } } -}); -BI.shortcut("bi.tree_node_checkbox", BI.TreeNodeCheckbox); \ No newline at end of file +} From c9c65cfbbfb8d6ca4501fe0005b2f46bcc78458d Mon Sep 17 00:00:00 2001 From: "crawford.zhou" Date: Wed, 11 Jan 2023 13:50:20 +0800 Subject: [PATCH 2/4] =?UTF-8?q?KERNEL-14067=20feat:checkbox=E7=9A=84es6?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/checkbox/index.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/case/checkbox/index.js diff --git a/src/case/checkbox/index.js b/src/case/checkbox/index.js new file mode 100644 index 000000000..aaaf21a68 --- /dev/null +++ b/src/case/checkbox/index.js @@ -0,0 +1,6 @@ +export { ArrowTreeGroupNodeCheckbox } from "./check.arrownode"; +export { CheckingMarkNode } from "./check.checkingmarknode"; +export { FirstTreeNodeCheckbox } from "./check.first.treenode"; +export { LastTreeNodeCheckbox } from "./check.last.treenode"; +export { MidTreeNodeCheckbox } from "./check.mid.treenode"; +export { TreeNodeCheckbox } from "./check.treenode"; From eebd1002b37b1926a9ec2bd323c4887acbe344f1 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Wed, 11 Jan 2023 15:06:22 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E6=97=A0JIRA=E4=BB=BB=E5=8A=A1=20fix:=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=BA=9B=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc | 6 +++--- es6.js | 4 +++- src/core/index.js | 2 +- src/core/wrapper/layout/flex/flex.vertical.js | 2 ++ 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.eslintrc b/.eslintrc index f5b262e6e..a2c317000 100644 --- a/.eslintrc +++ b/.eslintrc @@ -41,8 +41,8 @@ }, { "files": ["webpack/*.js", "./*.js", "lib/**/*.js", "lib/*.js", "./bin/*.js", "./bin/**/*.js"], "extends": "plugin:@fui/esnext" - }, { - "files": ["types/*.ts", "typescript/*.ts","typescript/**/*.ts"], - "extends": "plugin:@fui/typescript" + // }, { + // "files": ["types/*.ts", "typescript/*.ts","typescript/**/*.ts"], + // "extends": "plugin:@fui/typescript" }] } diff --git a/es6.js b/es6.js index 7b7734593..d067c861a 100644 --- a/es6.js +++ b/es6.js @@ -155,7 +155,9 @@ ${M} } `; - const prettierCode = prettier.format(outputCode); + const prettierCode = prettier.format(outputCode, { + tabWidth: 4, + }); fs.writeFileSync(srcName, prettierCode); await fix(srcName); diff --git a/src/core/index.js b/src/core/index.js index c8ea3d91a..d3a64ffc7 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -32,9 +32,9 @@ export * from "./structure"; export * from "./h"; export * from "./constant"; export * from "./logic"; -export * from "./utils"; export * from "./wrapper"; export * from "./platform/web"; +export * from "./utils"; export { StyleLoaderManager, diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index 7847d7009..fefc7abad 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -11,6 +11,8 @@ import { Layout } from "../../layout"; */ @shortcut() export class FlexVerticalLayout extends Layout { + static xtype = "bi.flex_vertical"; + props() { return extend(super.props(...arguments), { baseCls: "bi-f-v", From 8979ae1743f4c9eac3f77909909b347efd5524f5 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Wed, 11 Jan 2023 16:15:07 +0800 Subject: [PATCH 4/4] =?UTF-8?q?KERNEL-14085=20refactor:=20widget/calender?= =?UTF-8?q?=E3=80=81date?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/combination/navigation.js | 14 +- src/core/utils/dom.js | 8 +- src/core/wrapper/layout/layout.card.js | 2 +- src/widget/collapse/collapse.js | 114 +++++---- src/widget/date/calendar/combo.month.date.js | 77 +++--- src/widget/date/calendar/combo.year.date.js | 85 ++++--- src/widget/date/calendar/index.js | 8 + src/widget/date/calendar/picker.date.js | 240 +++++++++--------- src/widget/date/calendar/picker.year.js | 138 +++++----- .../date/calendar/popup.calendar.date.js | 146 ++++++----- src/widget/date/calendar/popup.month.js | 113 +++++---- src/widget/date/calendar/popup.year.js | 129 +++++----- .../date/calendar/trigger.triangle.date.js | 69 ++--- src/widget/index.js | 12 + 14 files changed, 611 insertions(+), 544 deletions(-) create mode 100644 src/widget/date/calendar/index.js create mode 100644 src/widget/index.js diff --git a/src/base/combination/navigation.js b/src/base/combination/navigation.js index da12b1174..546cb4ff3 100644 --- a/src/base/combination/navigation.js +++ b/src/base/combination/navigation.js @@ -18,9 +18,7 @@ export class Navigation extends Widget { single: false, showIndex: false, tab: false, - cardCreator: (v) => { - return createWidget(); - }, + cardCreator: v => createWidget(), afterCardCreated: BI.emptyFn, afterCardShow: BI.emptyFn, @@ -45,13 +43,12 @@ export class Navigation extends Widget { new ShowListener({ eventObj: this.tab, cardLayout: this.layout, - cardNameCreator: (v) => { - return this.showIndex + v; - }, - cardCreator: (v) => { + cardNameCreator: v => this.showIndex + v, + cardCreator: v => { Widget.execWithContext(this, () => { this.cardMap[v] = cardCreator(v); }); + return this.cardMap[v]; }, afterCardCreated: bind(this.afterCardCreated, this), @@ -76,7 +73,7 @@ export class Navigation extends Widget { const { single } = this.options; if (single === true) { each(this.cardMap, (name, card) => { - if (name !== (currCardName + "")) { + if (name !== (`${currCardName}`)) { this.layout.deleteCardByName(name); delete this.cardMap[name]; } @@ -170,6 +167,5 @@ export class Navigation extends Widget { destroy() { super.destroy(arguments); } - } diff --git a/src/core/utils/dom.js b/src/core/utils/dom.js index c356b9b50..4b5096a8f 100644 --- a/src/core/utils/dom.js +++ b/src/core/utils/dom.js @@ -265,12 +265,12 @@ export function _getLeftAlignPosition(combo, popup, extraWidth, container) { } export function getLeftAlignPosition(combo, popup, extraWidth, container) { - let left = this._getLeftAlignPosition(combo, popup, extraWidth, container); + let left = _getLeftAlignPosition(combo, popup, extraWidth, container); let dir = ""; // 如果放不下，优先使用RightAlign, 如果RightAlign也放不下, 再使用left=0 const containerRect = container ? container.getBoundingClientRect() : { left: 0 }; if (left + containerRect.left < 0) { - left = this._getRightAlignPosition(combo, popup, extraWidth); + left = _getRightAlignPosition(combo, popup, extraWidth); dir = "left"; } if (left + containerRect.left < 0) { @@ -302,11 +302,11 @@ export function _getRightAlignPosition(combo, popup, extraWidth, container) { } export function getRightAlignPosition(combo, popup, extraWidth, container) { - let left = this._getRightAlignPosition(combo, popup, extraWidth, container); + let left = _getRightAlignPosition(combo, popup, extraWidth, container); let dir = ""; // 如果放不下，优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0 if (left < 0) { - left = this._getLeftAlignPosition(combo, popup, extraWidth, container); + left = _getLeftAlignPosition(combo, popup, extraWidth, container); dir = "right"; } if (left < 0) { diff --git a/src/core/wrapper/layout/layout.card.js b/src/core/wrapper/layout/layout.card.js index 4b2fbad2a..6a7ebaadc 100644 --- a/src/core/wrapper/layout/layout.card.js +++ b/src/core/wrapper/layout/layout.card.js @@ -83,7 +83,7 @@ export class CardLayout extends Layout { } isCardExisted(cardName) { - return some(this.options.items, (i, item) => item.cardName === cardName && item.el); + return some(this.options.items, (i, item) => item.cardName == cardName && item.el); } getCardByName(cardName) { diff --git a/src/widget/collapse/collapse.js b/src/widget/collapse/collapse.js index f899c3588..4111a23ce 100644 --- a/src/widget/collapse/collapse.js +++ b/src/widget/collapse/collapse.js @@ -1,6 +1,13 @@ -BI.Collapse = BI.inherit(BI.Widget, { +import { shortcut, Widget, map, extend, isFunction, contains, each, isKey, isNotEmptyArray } from "@/core"; +import { Expander } from "@/base"; - props: { +@shortcut() +export class Collapse extends Widget { + static xtype = "bi.collapse" + + static EVENT_EXPAND = "EVENT_EXPAND" + + props = { baseCls: "bi-collapse", items: [], value: [], @@ -11,98 +18,95 @@ BI.Collapse = BI.inherit(BI.Widget, { isDefaultInit: false, openMotion: { animation: "bi-slide-up", - animationDuring: 200 - } - }, + animationDuring: 200, + }, + }; - render: function () { - var o = this.options; + render() { + const o = this.options; - var collapseCls = o.ghost ? "" : "bi-background " + (o.bordered ? "bi-border bi-border-radius" : ""); + const collapseCls = o.ghost ? "" : `bi-background ${o.bordered ? "bi-border bi-border-radius" : ""}`; this.expanders = {}; return { type: "bi.vertical", cls: collapseCls, - items: this._getItems(this.options.items) + items: this._getItems(this.options.items), }; - }, + } - _getItems: function (items) { - var self = this, o = this.options; + _getItems(items) { + const o = this.options; - return BI.map(items, function (index, item) { - var isActive = BI.contains(self._getCurrentValue(o.value), item.value); - var cls = o.ghost || index === 0 ? "" : "bi-border-top"; + return map(items, (index, item) => { + const isActive = contains(this._getCurrentValue(o.value), item.value); + const cls = o.ghost || index === 0 ? "" : "bi-border-top"; - var el = BI.extend({ + const el = extend({ type: "bi.arrow_group_node", height: 30, text: item.text, value: item.value, - open: isActive + open: isActive, }, item.el); - var popup = BI.extend({ + const popup = extend({ animation: o.openMotion.animation, - animationDuring: o.openMotion.animationDuring + animationDuring: o.openMotion.animationDuring, }, item.popup); - - return BI.extend({ + + return extend({ type: "bi.expander", - cls: cls, + cls, isDefaultInit: o.isDefaultInit, trigger: o.trigger, listeners: [{ - eventName: BI.Expander.EVENT_EXPAND, - action: function () { - self._hideOtherExpander(item.value); - self.fireEvent(BI.Collapse.EVENT_EXPAND, item.value); - } - }] + eventName: Expander.EVENT_EXPAND, + action: () => { + this._hideOtherExpander(item.value); + this.fireEvent(Collapse.EVENT_EXPAND, item.value); + }, + }], }, item, { - el: el, - popup: popup, - ref: function (_ref) { - BI.isFunction(item.ref) && item.ref(_ref); - self.expanders[item.value] = _ref; - } + el, + popup, + ref: _ref => { + isFunction(item.ref) && item.ref(_ref); + this.expanders[item.value] = _ref; + }, }); }); - }, + } - _hideOtherExpander: function (expandKey) { + _hideOtherExpander(expandKey) { if (this.options.accordion) { - BI.each(this.expanders, function (key, expander) { - key !== (expandKey + "") && expander.hideView(); + each(this.expanders, (key, expander) => { + key !== (`${expandKey}`) && expander.hideView(); }); } - }, + } + + _getCurrentValue(v) { + const values = isNotEmptyArray(v) ? v : isKey(v) ? [v] : []; - _getCurrentValue: function (v) { - var values = BI.isNotEmptyArray(v) ? v : BI.isKey(v) ? [v] : []; - return this.options.accordion ? values.slice(0, 1) : values; - }, + } - getValue: function () { - var value = []; - BI.each(this.expanders, function (key, expander) { + getValue() { + const value = []; + each(this.expanders, (key, expander) => { expander.isExpanded() && value.push(key); }); return value; - }, + } - setValue: function (v) { - var values = BI.map(this._getCurrentValue(v), function (idx, value) {return value + "";}); - BI.each(this.expanders, function (key, expander) { - BI.contains(values, key) ? expander.showView() : expander.hideView(); + setValue(v) { + const values = map(this._getCurrentValue(v), (idx, value) => `${value}`); + each(this.expanders, (key, expander) => { + contains(values, key) ? expander.showView() : expander.hideView(); }); } -}); - -BI.Collapse.EVENT_EXPAND = "EVENT_EXPAND"; -BI.shortcut("bi.collapse", BI.Collapse); +} diff --git a/src/widget/date/calendar/combo.month.date.js b/src/widget/date/calendar/combo.month.date.js index aac5a7fc0..565745c4e 100644 --- a/src/widget/date/calendar/combo.month.date.js +++ b/src/widget/date/calendar/combo.month.date.js @@ -1,40 +1,49 @@ +import { shortcut, extend, createWidget } from "@/core"; +import { Trigger, Combo } from "@/base"; +import { MonthPopup } from "./popup.month"; + /** * 日期控件中的月份下拉框 * * Created by GUY on 2015/9/7. - * @class BI.MonthDateCombo - * @extends BI.Trigger + * @class MonthDateCombo + * @extends Trigger */ -BI.MonthDateCombo = BI.inherit(BI.Trigger, { - _defaultConfig: function () { - return BI.extend( BI.MonthDateCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MonthDateCombo extends Trigger { + static xtype = "bi.month_date_combo" + + static EVENT_CHANGE = "EVENT_CHANGE" + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-month-combo", height: 24, - container: null + container: null, }); - }, - _init: function () { - BI.MonthDateCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; - this.trigger = BI.createWidget({ - type: "bi.date_triangle_trigger" + this.trigger = createWidget({ + type: "bi.date_triangle_trigger", }); - this.popup = BI.createWidget({ + this.popup = createWidget({ type: "bi.month_popup", allowMonths: o.allowMonths, - behaviors: o.behaviors + behaviors: o.behaviors, }); - this.popup.on(BI.MonthPopup.EVENT_CHANGE, function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MonthDateCombo.EVENT_CHANGE); + this.popup.on(MonthPopup.EVENT_CHANGE, () => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent(MonthDateCombo.EVENT_CHANGE); }); - - this.combo = BI.createWidget({ + this.combo = createWidget({ type: "bi.combo", offsetStyle: "center", container: o.container, @@ -49,28 +58,26 @@ BI.MonthDateCombo = BI.inherit(BI.Trigger, { type: "bi.vertical", hgap: 6, vgap: 5, - items: [this.popup] - } - } + items: [this.popup], + }, + }, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.doBehavior(); + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.doBehavior(); }); - }, + } - populate: function () { - this.popup.populate.apply(this.popup, arguments); - }, + populate() { + this.popup.populate(...arguments); + } - setValue: function (v) { + setValue(v) { this.trigger.setValue(v); this.popup.setValue(v); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); } -}); -BI.MonthDateCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.month_date_combo", BI.MonthDateCombo); \ No newline at end of file +} diff --git a/src/widget/date/calendar/combo.year.date.js b/src/widget/date/calendar/combo.year.date.js index c8e72580b..b3f883b12 100644 --- a/src/widget/date/calendar/combo.year.date.js +++ b/src/widget/date/calendar/combo.year.date.js @@ -1,45 +1,55 @@ +import { shortcut, extend, createWidget } from "@/core"; +import { Trigger, Combo } from "@/base"; +import { YearPopup } from "./popup.year"; + /** * 年份下拉框 * * Created by GUY on 2015/9/7. - * @class BI.YearDateCombo - * @extends BI.Trigger + * @class YearDateCombo + * @extends Trigger */ -BI.YearDateCombo = BI.inherit(BI.Trigger, { - _defaultConfig: function () { - return BI.extend( BI.YearDateCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class YearDateCombo extends Trigger { + static xtype = "bi.year_date_combo" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW" + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-year-combo", min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 behaviors: {}, height: 24, - container: null + container: null, }); - }, - _init: function () { - BI.YearDateCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; - this.trigger = BI.createWidget({ - type: "bi.date_triangle_trigger" + this.trigger = createWidget({ + type: "bi.date_triangle_trigger", }); - this.popup = BI.createWidget({ + this.popup = createWidget({ type: "bi.year_popup", behaviors: o.behaviors, min: o.min, max: o.max, - width: 122 + width: 122, }); - this.popup.on(BI.YearPopup.EVENT_CHANGE, function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.YearDateCombo.EVENT_CHANGE); + this.popup.on(YearPopup.EVENT_CHANGE, () => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent(YearDateCombo.EVENT_CHANGE); }); - - this.combo = BI.createWidget({ + this.combo = createWidget({ type: "bi.combo", offsetStyle: "center", element: this, @@ -50,36 +60,33 @@ BI.YearDateCombo = BI.inherit(BI.Trigger, { popup: { minWidth: 100, stopPropagation: false, - el: this.popup - } + el: this.popup, + }, }); - this.combo.on(BI.Combo.EVENT_CHANGE, function () { - self.fireEvent(BI.YearDateCombo.EVENT_CHANGE); + this.combo.on(Combo.EVENT_CHANGE, () => { + this.fireEvent(YearDateCombo.EVENT_CHANGE); }); // BI-22551 popup未初始化传入的behavior无效 - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.doBehavior(); - self.fireEvent(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW); + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.doBehavior(); + this.fireEvent(YearDateCombo.EVENT_BEFORE_POPUPVIEW); }); - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { this.popup.setMinDate(minDate); - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { this.popup.setMaxDate(maxDate); - }, + } - setValue: function (v) { + setValue(v) { this.trigger.setValue(v); this.popup.setValue(v); - }, + } - getValue: function () { + getValue() { return this.popup.getValue(); } -}); -BI.YearDateCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.year_date_combo", BI.YearDateCombo); +} diff --git a/src/widget/date/calendar/index.js b/src/widget/date/calendar/index.js new file mode 100644 index 000000000..26a397d24 --- /dev/null +++ b/src/widget/date/calendar/index.js @@ -0,0 +1,8 @@ +export { MonthDateCombo } from "./combo.month.date"; +export { YearDateCombo } from "./combo.year.date"; +export { DatePicker } from "./picker.date"; +export { YearPicker } from "./picker.year"; +export { DateCalendarPopup } from "./popup.calendar.date"; +export { MonthPopup } from "./popup.month"; +export { YearPopup } from "./popup.year"; +export { DateTriangleTrigger } from "./trigger.triangle.date"; diff --git a/src/widget/date/calendar/picker.date.js b/src/widget/date/calendar/picker.date.js index 369982dfa..a5a23ae11 100644 --- a/src/widget/date/calendar/picker.date.js +++ b/src/widget/date/calendar/picker.date.js @@ -1,222 +1,226 @@ +import { shortcut, Widget, extend, createWidget, contains, isNull, getDate, filter, range, checkDateVoid, parseDateTime, parseInt, print } from "@/core"; +import { IconButton } from "@/base"; +import { YearDateCombo } from "./combo.year.date"; +import { MonthDateCombo } from "./combo.month.date"; + /** * Created by GUY on 2015/9/7. - * @class BI.DatePicker - * @extends BI.Widget + * @class DatePicker + * @extends Widget */ -BI.DatePicker = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.DatePicker.superclass._defaultConfig.apply(this, arguments); +@shortcut() +export class DatePicker extends Widget { + static xtype = "bi.date_picker" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); - return BI.extend(conf, { + return extend(conf, { baseCls: "bi-date-picker", height: 40, min: "1900-01-01", // 最小日期 - max: "2099-12-31" // 最大日期 + max: "2099-12-31", // 最大日期 }); - }, - - _init: function () { - BI.DatePicker.superclass._init.apply(this, arguments); - var self = this; - var o = this.options; - this._year = BI.getDate().getFullYear(); - this._month = BI.getDate().getMonth() + 1; - this.left = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const o = this.options; + this._year = getDate().getFullYear(); + this._month = getDate().getMonth() + 1; + this.left = createWidget({ type: "bi.icon_button", cls: "pre-page-h-font", width: 24, - height: 24 + height: 24, }); - this.left.on(BI.IconButton.EVENT_CHANGE, function () { - if (self._month === 1) { - self.setValue({ - year: (self.year.getValue() - 1) || (BI.getDate().getFullYear() - 1), - month: 12 + this.left.on(IconButton.EVENT_CHANGE, () => { + if (this._month === 1) { + this.setValue({ + year: (this.year.getValue() - 1) || (getDate().getFullYear() - 1), + month: 12, }); } else { - self.setValue({ - year: self.year.getValue() || BI.getDate().getFullYear(), - month: (self.month.getValue() - 1) || BI.getDate().getMonth() + this.setValue({ + year: this.year.getValue() || getDate().getFullYear(), + month: (this.month.getValue() - 1) || getDate().getMonth(), }); } - self.fireEvent(BI.DatePicker.EVENT_CHANGE); - // self._checkLeftValid(); - // self._checkRightValid(); + this.fireEvent(DatePicker.EVENT_CHANGE); + // this._checkLeftValid(); + // this._checkRightValid(); }); - this.right = BI.createWidget({ + this.right = createWidget({ type: "bi.icon_button", cls: "next-page-h-font", width: 24, - height: 24 + height: 24, }); - this.right.on(BI.IconButton.EVENT_CHANGE, function () { - if (self._month === 12) { - self.setValue({ - year: (self.year.getValue() + 1) || (BI.getDate().getFullYear() + 1), - month: 1 + this.right.on(IconButton.EVENT_CHANGE, () => { + if (this._month === 12) { + this.setValue({ + year: (this.year.getValue() + 1) || (getDate().getFullYear() + 1), + month: 1, }); } else { - self.setValue({ - year: self.year.getValue() || BI.getDate().getFullYear(), - month: (self.month.getValue() + 1) || (BI.getDate().getMonth() + 2) + this.setValue({ + year: this.year.getValue() || getDate().getFullYear(), + month: (this.month.getValue() + 1) || (getDate().getMonth() + 2), }); } - self.fireEvent(BI.DatePicker.EVENT_CHANGE); - // self._checkLeftValid(); - // self._checkRightValid(); + this.fireEvent(DatePicker.EVENT_CHANGE); + // this._checkLeftValid(); + // this._checkRightValid(); }); - this.year = BI.createWidget({ + this.year = createWidget({ type: "bi.year_date_combo", behaviors: o.behaviors, min: o.min, - max: o.max + max: o.max, }); - this.year.on(BI.YearDateCombo.EVENT_CHANGE, function () { - self.setValue({ - year: self.year.getValue(), - month: self._refreshMonth() + this.year.on(YearDateCombo.EVENT_CHANGE, () => { + this.setValue({ + year: this.year.getValue(), + month: this._refreshMonth(), }); - self.fireEvent(BI.DatePicker.EVENT_CHANGE); + this.fireEvent(DatePicker.EVENT_CHANGE); }); - this.year.on(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + this.year.on(YearDateCombo.EVENT_BEFORE_POPUPVIEW, () => { + this.fireEvent(DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); }); - this.month = BI.createWidget({ + this.month = createWidget({ type: "bi.month_date_combo", behaviors: o.behaviors, - allowMonths: this._getAllowMonths() + allowMonths: this._getAllowMonths(), }); - this.month.on(BI.MonthDateCombo.EVENT_CHANGE, function () { - self.setValue({ - year: self.year.getValue() || self._year, - month: self.month.getValue() + this.month.on(MonthDateCombo.EVENT_CHANGE, () => { + this.setValue({ + year: this.year.getValue() || this._year, + month: this.month.getValue(), }); - self.fireEvent(BI.DatePicker.EVENT_CHANGE); + this.fireEvent(DatePicker.EVENT_CHANGE); }); - this.month.on(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + this.month.on(YearDateCombo.EVENT_BEFORE_POPUPVIEW, () => { + this.fireEvent(DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); }); - BI.createWidget({ + createWidget({ type: "bi.htape", element: this, items: [{ el: { type: "bi.center_adapt", - items: [this.left] + items: [this.left], }, - width: 24 + width: 24, }, { el: { type: "bi.center_adapt", hgap: 10, - items: [this.year, this.month] - } + items: [this.year, this.month], + }, }, { el: { type: "bi.center_adapt", - items: [this.right] + items: [this.right], }, - width: 24 - }] + width: 24, + }], }); this.setValue({ year: this._year, - month: this._month + month: this._month, }); - }, + } - _refreshMonth: function (defaultMonth) { - var month = this.month.getValue(); + _refreshMonth(defaultMonth) { + let month = this.month.getValue(); this.month.populate(this._getAllowMonths()); - var allowMonth = this._getAllowMonths(); - if (!BI.contains(allowMonth, month)) { + const allowMonth = this._getAllowMonths(); + if (!contains(allowMonth, month)) { month = defaultMonth || allowMonth[0]; } this.month.setValue(month); + return month; - }, + } - _getAllowMonths: function () { - var obj = this._getCheckMinMaxDate(); - var year = this.year.getValue() || this._year; + _getAllowMonths() { + const obj = this._getCheckMinMaxDate(); + const year = this.year.getValue() || this._year; - return BI.filter(BI.range(1, 13), function (idx, v) { - return !BI.checkDateVoid(year, v, 1, obj.min, obj.max)[0]; - }); - }, - - // 上一年月不合法则灰化 - _checkLeftValid: function () { - var obj = this._getCheckMinMaxDate(); - var year = this._month === 1 ? this._year - 1 : this._year; - var month = this._month === 1 ? 12 : this._month - 1; - var valid = BI.isNull(BI.checkDateVoid(year, month, 1, obj.min, obj.max)[0]); + return filter(range(1, 13), (idx, v) => !checkDateVoid(year, v, 1, obj.min, obj.max)[0]); + } + + _checkLeftValid() { + const obj = this._getCheckMinMaxDate(); + const year = this._month === 1 ? this._year - 1 : this._year; + const month = this._month === 1 ? 12 : this._month - 1; + const valid = isNull(checkDateVoid(year, month, 1, obj.min, obj.max)[0]); this.left.setEnable(valid); return valid; - }, - - // 下一年月不合法则灰化 - _checkRightValid: function () { - var obj = this._getCheckMinMaxDate(); - var year = this._month === 12 ? this._year + 1 : this._year; - var month = this._month === 12 ? 1 : this._month + 1; - var valid = BI.isNull(BI.checkDateVoid(year, month, 1, obj.min, obj.max)[0]); + } + + _checkRightValid() { + const obj = this._getCheckMinMaxDate(); + const year = this._month === 12 ? this._year + 1 : this._year; + const month = this._month === 12 ? 1 : this._month + 1; + const valid = isNull(checkDateVoid(year, month, 1, obj.min, obj.max)[0]); this.right.setEnable(valid); return valid; - }, + } - _getCheckMinMaxDate: function () { - var o = this.options; - var minDate = BI.parseDateTime(o.min, "%Y-%X-%d"); - var maxDate = BI.parseDateTime(o.max, "%Y-%X-%d"); + _getCheckMinMaxDate() { + const o = this.options; + const minDate = parseDateTime(o.min, "%Y-%X-%d"); + const maxDate = parseDateTime(o.max, "%Y-%X-%d"); minDate.setDate(1); maxDate.setDate(1); return { - min: BI.print(minDate, "%Y-%X-%d"), - max: BI.print(maxDate, "%Y-%X-%d") + min: print(minDate, "%Y-%X-%d"), + max: print(maxDate, "%Y-%X-%d"), }; - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { this.options.min = minDate; this.year.setMinDate(minDate); this._refreshMonth(this._month); // this._checkLeftValid(); // this._checkRightValid(); - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { this.options.max = maxDate; this.year.setMaxDate(maxDate); this._refreshMonth(this._month); // this._checkLeftValid(); // this._checkRightValid(); - }, + } - setValue: function (ob) { - this._year = BI.parseInt(ob.year); - this._month = BI.parseInt(ob.month); + setValue(ob) { + this._year = parseInt(ob.year); + this._month = parseInt(ob.month); this.year.setValue(ob.year); this._refreshMonth(this._month); this.month.setValue(ob.month); // this._checkLeftValid(); // this._checkRightValid(); - }, + } - getValue: function () { + getValue() { return { year: this.year.getValue(), - month: this.month.getValue() + month: this.month.getValue(), }; } -}); -BI.DatePicker.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; -BI.shortcut("bi.date_picker", BI.DatePicker); +} diff --git a/src/widget/date/calendar/picker.year.js b/src/widget/date/calendar/picker.year.js index ac94ecd2b..cced43639 100644 --- a/src/widget/date/calendar/picker.year.js +++ b/src/widget/date/calendar/picker.year.js @@ -1,131 +1,135 @@ -/** - * Created by GUY on 2015/9/7. - * @class BI.YearPicker - * @extends BI.Widget - */ -BI.YearPicker = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.YearPicker.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { shortcut, Widget, extend, createWidget, getDate, parseDateTime } from "@/core"; +import { IconButton } from "@/base"; +import { YearDateCombo } from "./combo.year.date"; + +@shortcut() +export class YearPicker extends Widget { + static xtype = "bi.year_picker" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-year-picker", behaviors: {}, height: 40, min: "1900-01-01", // 最小日期 - max: "2099-12-31" // 最大日期 + max: "2099-12-31", // 最大日期 }); - }, + } - _init: function () { - BI.YearPicker.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this._year = BI.getDate().getFullYear(); - this.left = BI.createWidget({ - type: "bi.icon_button", + _init() { + super._init(...arguments); + const o = this.options; + this._year = getDate().getFullYear(); + this.left = createWidget({ + type: IconButton.xtype, cls: "pre-page-h-font", width: 25, - height: 25 + height: 25, }); - this.left.on(BI.IconButton.EVENT_CHANGE, function () { - self.setValue(self.year.getValue() - 1); - self.fireEvent(BI.YearPicker.EVENT_CHANGE); - // self._checkLeftValid(); - // self._checkRightValid(); + this.left.on(IconButton.EVENT_CHANGE, () => { + this.setValue(this.year.getValue() - 1); + this.fireEvent(YearPicker.EVENT_CHANGE); + // this._checkLeftValid(); + // this._checkRightValid(); }); - this.right = BI.createWidget({ - type: "bi.icon_button", + this.right = createWidget({ + type: IconButton.xtype, cls: "next-page-h-font", width: 25, - height: 25 + height: 25, }); - this.right.on(BI.IconButton.EVENT_CHANGE, function () { - self.setValue(self.year.getValue() + 1); - self.fireEvent(BI.YearPicker.EVENT_CHANGE); - // self._checkLeftValid(); - // self._checkRightValid(); + this.right.on(IconButton.EVENT_CHANGE, () => { + this.setValue(this.year.getValue() + 1); + this.fireEvent(YearPicker.EVENT_CHANGE); + // this._checkLeftValid(); + // this._checkRightValid(); }); - this.year = BI.createWidget({ + this.year = createWidget({ type: "bi.year_date_combo", min: o.min, behaviors: o.behaviors, max: o.max, - width: 50 + width: 50, }); - this.year.on(BI.YearDateCombo.EVENT_CHANGE, function () { - self.setValue(self.year.getValue()); - self.fireEvent(BI.YearPicker.EVENT_CHANGE); + this.year.on(YearDateCombo.EVENT_CHANGE, () => { + this.setValue(this.year.getValue()); + this.fireEvent(YearPicker.EVENT_CHANGE); }); - this.year.on(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.YearPicker.EVENT_BEFORE_POPUPVIEW); + this.year.on(YearDateCombo.EVENT_BEFORE_POPUPVIEW, () => { + this.fireEvent(YearPicker.EVENT_BEFORE_POPUPVIEW); }); - BI.createWidget({ + createWidget({ type: "bi.htape", element: this, items: [{ el: { type: "bi.center_adapt", - items: [this.left] + items: [this.left], }, - width: 25 + width: 25, }, { type: "bi.center_adapt", items: [{ - el: this.year - }] + el: this.year, + }], }, { el: { type: "bi.center_adapt", - items: [this.right] + items: [this.right], }, - width: 25 - }] + width: 25, + }], }); this.setValue(this._year); - }, + } - _checkLeftValid: function () { - var o = this.options; - var valid = this._year > BI.parseDateTime(o.min, "%Y-%X-%d").getFullYear(); + _checkLeftValid() { + const o = this.options; + const valid = this._year > parseDateTime(o.min, "%Y-%X-%d").getFullYear(); this.left.setEnable(valid); + return valid; - }, + } - _checkRightValid: function () { - var o = this.options; - var valid = this._year < BI.parseDateTime(o.max, "%Y-%X-%d").getFullYear(); + _checkRightValid() { + const o = this.options; + const valid = this._year < parseDateTime(o.max, "%Y-%X-%d").getFullYear(); this.right.setEnable(valid); + return valid; - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { this.options.min = minDate; this.year.setMinDate(minDate); // this._checkLeftValid(); // this._checkRightValid(); - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { this.options.max = maxDate; this.year.setMaxDate(maxDate); // this._checkLeftValid(); // this._checkRightValid(); - }, - + } - setValue: function (v) { + setValue(v) { this._year = v; this.year.setValue(v); // this._checkLeftValid(); // this._checkRightValid(); - }, + } - getValue: function () { + getValue() { return this.year.getValue(); } -}); -BI.YearPicker.EVENT_CHANGE = "EVENT_CHANGE"; -BI.YearPicker.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.year_picker", BI.YearPicker); +} diff --git a/src/widget/date/calendar/popup.calendar.date.js b/src/widget/date/calendar/popup.calendar.date.js index ce2892f55..a3180e334 100644 --- a/src/widget/date/calendar/popup.calendar.date.js +++ b/src/widget/date/calendar/popup.calendar.date.js @@ -1,38 +1,49 @@ +import { shortcut, Widget, createWidget, bind, getDate, each, isNotEmptyString } from "@/core"; +import { Navigation } from "@/base"; +import { Calendar } from "@/case"; +import { DatePicker } from "./picker.date"; + /** * Created by GUY on 2015/9/7. - * @class BI.DateCalendarPopup - * @extends BI.Widget + * @class DateCalendarPopup + * @extends Widget */ -BI.DateCalendarPopup = BI.inherit(BI.Widget, { +@shortcut() +export class DateCalendarPopup extends Widget { + static xtype = "bi.date_calendar_popup" - props: { + props = { baseCls: "bi-date-calendar-popup", - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期 - selectedTime: null - }, - - _createNav: function (v) { - var date = BI.Calendar.getDateJSONByPage(v); - var calendar = BI.createWidget({ + min: "1900-01-01", + max: "2099-12-31", + selectedTime: null, + }; + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" + + + _createNav(v) { + const date = Calendar.getDateJSONByPage(v); + const calendar = createWidget({ type: "bi.calendar", logic: { - dynamic: true + dynamic: true, }, min: this.options.min, max: this.options.max, year: date.year, month: date.month, // BI-45616 此处为确定当前应该展示哪个年月对应的Calendar, day不是关键数据, 给1号就可 - day: 1 + day: 1, }); + return calendar; - }, + } - render: function () { - var self = this, - o = this.options; - this.today = BI.getDate(); + render() { + const o = this.options; + this.today = getDate(); this._year = this.today.getFullYear(); this._month = this.today.getMonth() + 1; this._day = this.today.getDate(); @@ -40,47 +51,47 @@ BI.DateCalendarPopup = BI.inherit(BI.Widget, { this.selectedTime = o.selectedTime || { year: this._year, month: this._month, - day: this._day + day: this._day, }; - this.datePicker = BI.createWidget({ + this.datePicker = createWidget({ type: "bi.date_picker", behaviors: o.behaviors, min: o.min, - max: o.max + max: o.max, }); - this.calendar = BI.createWidget({ + this.calendar = createWidget({ direction: "top", logic: { - dynamic: true + dynamic: true, }, type: "bi.navigation", tab: this.datePicker, - cardCreator: BI.bind(this._createNav, this), + cardCreator: bind(this._createNav, this), - afterCardCreated: function () { + afterCardCreated () { }, - afterCardShow: function () { - this.setValue(self.selectedTime); - } + afterCardShow: () => { + this.calendar.setValue(this.selectedTime); + }, }); - this.datePicker.on(BI.DatePicker.EVENT_CHANGE, function () { - self.selectedTime = self.datePicker.getValue(); - self.selectedTime.day = 1; - self.calendar.setSelect(BI.Calendar.getPageByDateJSON(self.selectedTime)); + this.datePicker.on(DatePicker.EVENT_CHANGE, () => { + this.selectedTime = this.datePicker.getValue(); + this.selectedTime.day = 1; + this.calendar.setSelect(Calendar.getPageByDateJSON(this.selectedTime)); }); - this.datePicker.on(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, function () { - self.fireEvent(BI.DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + this.datePicker.on(DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, () => { + this.fireEvent(DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); }); - this.calendar.on(BI.Navigation.EVENT_CHANGE, function () { - self.selectedTime = self.calendar.getValue(); - self.setValue(self.selectedTime); - self.fireEvent(BI.DateCalendarPopup.EVENT_CHANGE); + this.calendar.on(Navigation.EVENT_CHANGE, () => { + this.selectedTime = this.calendar.getValue(); + this.setValue(this.selectedTime); + this.fireEvent(DateCalendarPopup.EVENT_CHANGE); }); return [{ @@ -88,64 +99,61 @@ BI.DateCalendarPopup = BI.inherit(BI.Widget, { items: [{ el: this.calendar, hgap: 12, - bgap: 7 - }] + bgap: 7, + }], }, { type: "bi.absolute", items: [{ el: { type: "bi.layout", - cls: "bi-split-top" + cls: "bi-split-top", }, height: 1, top: 40, left: 0, - right: 0 - }] - }] - }, - - _checkMin: function () { - var o = this.options; - BI.each(this.calendar.getAllCard(), function (idx, calendar) { + right: 0, + }], + }]; + } + + _checkMin() { + const o = this.options; + each(this.calendar.getAllCard(), (idx, calendar) => { calendar.setMinDate(o.min); }); - }, + } - _checkMax: function () { - var o = this.options; - BI.each(this.calendar.getAllCard(), function (idx, calendar) { + _checkMax() { + const o = this.options; + each(this.calendar.getAllCard(), (idx, calendar) => { calendar.setMaxDate(o.max); }); - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; this.datePicker.setMinDate(minDate); this._checkMin(); } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; this.datePicker.setMaxDate(maxDate); this._checkMax(); } - }, + } - setValue: function (timeOb) { + setValue(timeOb) { this.datePicker.setValue(timeOb); - this.calendar.setSelect(BI.Calendar.getPageByDateJSON(timeOb)); + this.calendar.setSelect(Calendar.getPageByDateJSON(timeOb)); this.calendar.setValue(timeOb); this.selectedTime = timeOb; - }, + } - getValue: function () { + getValue() { return this.selectedTime; } -}); -BI.DateCalendarPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; -BI.shortcut("bi.date_calendar_popup", BI.DateCalendarPopup); +} diff --git a/src/widget/date/calendar/popup.month.js b/src/widget/date/calendar/popup.month.js index 402c6ffc2..2c859c660 100644 --- a/src/widget/date/calendar/popup.month.js +++ b/src/widget/date/calendar/popup.month.js @@ -1,99 +1,102 @@ +import { shortcut, Widget, extend, Controller, createWidget, Events, createItems, toPix, map, contains, getDate, LogicFactory, parseInt } from "@/core"; + /** * 月份展示面板 * * Created by GUY on 2015/9/2. - * @class BI.MonthPopup - * @extends BI.Trigger + * @class MonthPopup + * @extends Widget */ -BI.MonthPopup = BI.inherit(BI.Widget, { +@shortcut() +export class MonthPopup extends Widget { + static xtype = "bi.month_popup" + + static EVENT_CHANGE = "EVENT_CHANGE" - _defaultConfig: function () { - return BI.extend(BI.MonthPopup.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-month-popup", - behaviors: {} + behaviors: {}, }); - }, + } - _init: function () { - BI.MonthPopup.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const o = this.options; - this.selectedMonth = BI.getDate().getMonth() + 1; + this.selectedMonth = getDate().getMonth() + 1; - this.month = BI.createWidget({ + this.month = createWidget({ type: "bi.button_group", element: this, behaviors: o.behaviors, - items: BI.createItems(this._getItems(o.allowMonths), {}), - layouts: [BI.LogicFactory.createLogic("table", BI.extend({ - dynamic: true + items: createItems(this._getItems(o.allowMonths), {}), + layouts: [LogicFactory.createLogic("table", extend({ + dynamic: true, }, { columns: 2, rows: 6, columnSize: [1 / 2, 1 / 2], - rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 + rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, })), { type: "bi.center_adapt", vgap: 2, }], - value: o.value + value: o.value, }); - this.month.on(BI.Controller.EVENT_CHANGE, function (type, value) { - self.selectedMonth = value; - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.MonthPopup.EVENT_CHANGE); + this.month.on(Controller.EVENT_CHANGE, (...args) => { + const [type, value] = args; + this.selectedMonth = value; + this.fireEvent(Controller.EVENT_CHANGE, ...args); + if (type === Events.CLICK) { + this.fireEvent(MonthPopup.EVENT_CHANGE); } }); - }, + } - _getItems: function(m) { - BI.Widget.pushContext(this); + _getItems(m) { + Widget.pushContext(this); // 纵向排列月 - var month = [1, 7, 2, 8, 3, 9, 4, 10, 5, 11, 6, 12]; - var items = []; + const month = [1, 7, 2, 8, 3, 9, 4, 10, 5, 11, 6, 12]; + let items = []; items.push(month.slice(0, 2)); items.push(month.slice(2, 4)); items.push(month.slice(4, 6)); items.push(month.slice(6, 8)); items.push(month.slice(8, 10)); items.push(month.slice(10, 12)); - items = BI.map(items, function (i, item) { - return BI.map(item, function (j, td) { - return { - type: "bi.text_item", - cls: "bi-border-radius bi-list-item-select", - textAlign: "center", - whiteSpace: "nowrap", - once: false, - forceSelected: true, - height: BI.toPix(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1), - width: 30, - value: td, - text: td, - disabled: !BI.contains(m, td) - }; - }); - }); - BI.Widget.popContext(); + items = map(items, (i, item) => map(item, (j, td) => { + return { + type: "bi.text_item", + cls: "bi-border-radius bi-list-item-select", + textAlign: "center", + whiteSpace: "nowrap", + once: false, + forceSelected: true, + height: toPix(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1), + width: 30, + value: td, + text: td, + disabled: !contains(m, td), + }; + })); + Widget.popContext(); return items; - }, + } - populate: function(months) { + populate(months) { this.month.populate(this._getItems(months)); - }, + } - getValue: function () { + getValue() { return this.selectedMonth; - }, + } - setValue: function (v) { - v = BI.parseInt(v); + setValue(v) { + v = parseInt(v); this.selectedMonth = v; this.month.setValue([v]); } -}); -BI.MonthPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.month_popup", BI.MonthPopup); +} diff --git a/src/widget/date/calendar/popup.year.js b/src/widget/date/calendar/popup.year.js index 8c6c4d614..c7b8f0491 100644 --- a/src/widget/date/calendar/popup.year.js +++ b/src/widget/date/calendar/popup.year.js @@ -1,136 +1,143 @@ +import { shortcut, Widget, extend, createWidget, isKey, Controller, bind, isNotNull, isNotEmptyString, getDate, parseInt } from "@/core"; +import { Navigation } from "@/base"; +import { YearCalendar } from "@/case"; + /** * 年份展示面板 * * Created by GUY on 2015/9/2. - * @class BI.YearPopup - * @extends BI.Trigger + * @class YearPopup + * @extends Widget */ -BI.YearPopup = BI.inherit(BI.Widget, { +@shortcut() +export class YearPopup extends Widget { + static xtype = "bi.year_popup" + + static EVENT_CHANGE = "EVENT_CHANGE" - _defaultConfig: function () { - return BI.extend(BI.YearPopup.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-year-popup", behaviors: {}, min: "1900-01-01", // 最小日期 - max: "2099-12-31" // 最大日期 + max: "2099-12-31", // 最大日期 }); - }, + } - _createYearCalendar: function (v) { - var o = this.options, y = this._year; + _createYearCalendar(v) { + const o = this.options, + y = this._year; - var calendar = BI.createWidget({ + const calendar = createWidget({ type: "bi.year_calendar", behaviors: o.behaviors, min: o.min, max: o.max, logic: { - dynamic: true + dynamic: true, }, - year: y + v * 12 + year: y + v * 12, }); calendar.setValue(this._year); + return calendar; - }, + } - _init: function () { - BI.YearPopup.superclass._init.apply(this, arguments); - var self = this, o = this.options; + _init() { + super._init(...arguments); + const o = this.options; - this.selectedYear = this._year = BI.getDate().getFullYear(); + this.selectedYear = this._year = getDate().getFullYear(); - this.backBtn = BI.createWidget({ + this.backBtn = createWidget({ type: "bi.icon_button", cls: "pre-page-h-font", width: 24, height: 24, - value: -1 + value: -1, }); - this.preBtn = BI.createWidget({ + this.preBtn = createWidget({ type: "bi.icon_button", cls: "next-page-h-font", width: 24, height: 24, - value: 1 + value: 1, }); - this.navigation = BI.createWidget({ + this.navigation = createWidget({ type: "bi.navigation", element: this, single: true, logic: { - dynamic: true + dynamic: true, }, tab: { cls: "year-popup-navigation bi-high-light bi-split-top", height: 24, - items: [this.backBtn, this.preBtn] + items: [this.backBtn, this.preBtn], + }, + cardCreator: bind(this._createYearCalendar, this), + afterCardCreated: () => { + this.setValue(this.selectedYear); }, - cardCreator: BI.bind(this._createYearCalendar, this), - afterCardCreated: function () { - this.setValue(self.selectedYear); - } }); - this.navigation.on(BI.Navigation.EVENT_CHANGE, function () { - self.selectedYear = this.getValue(); - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - self.fireEvent(BI.YearPopup.EVENT_CHANGE, self.selectedYear); + this.navigation.on(Navigation.EVENT_CHANGE, (...args) => { + this.selectedYear = this.navigation.getValue(); + this.fireEvent(Controller.EVENT_CHANGE, ...args); + this.fireEvent(YearPopup.EVENT_CHANGE, this.selectedYear); }); - if(BI.isKey(o.value)){ + if (isKey(o.value)) { this.setValue(o.value); } - }, + } - _checkMin: function () { - var calendar = this.navigation.getSelectedCard(); - if (BI.isNotNull(calendar)) { + _checkMin() { + const calendar = this.navigation.getSelectedCard(); + if (isNotNull(calendar)) { calendar.setMinDate(this.options.min); } - }, + } - _checkMax: function () { - var calendar = this.navigation.getSelectedCard(); - if (BI.isNotNull(calendar)) { + _checkMax() { + const calendar = this.navigation.getSelectedCard(); + if (isNotNull(calendar)) { calendar.setMaxDate(this.options.max); } - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; this._checkMin(); } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; this._checkMax(); } - }, + } - getValue: function () { + getValue() { return this.selectedYear; - }, + } - setValue: function (v) { - var o = this.options; - v = BI.parseInt(v); + setValue(v) { + v = parseInt(v); // 切换年不受范围限制 // 对于年控件来说，只要传入的minDate和maxDate的year区间包含v就是合法的 - // var startDate = BI.parseDateTime(o.min, "%Y-%X-%d"); - // var endDate = BI.parseDateTime(o.max, "%Y-%X-%d"); - // if (BI.checkDateVoid(v, 1, 1, BI.print(BI.getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), BI.print(BI.getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) { - // v = BI.getDate().getFullYear(); + // var startDate = parseDateTime(o.min, "%Y-%X-%d"); + // var endDate = parseDateTime(o.max, "%Y-%X-%d"); + // if (checkDateVoid(v, 1, 1, print(getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), print(getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) { + // v = getDate().getFullYear(); // } this.selectedYear = v; - this.navigation.setSelect(BI.YearCalendar.getPageByYear(v)); + this.navigation.setSelect(YearCalendar.getPageByYear(v)); this.navigation.setValue(v); } -}); -BI.YearPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.year_popup", BI.YearPopup); \ No newline at end of file +} diff --git a/src/widget/date/calendar/trigger.triangle.date.js b/src/widget/date/calendar/trigger.triangle.date.js index 32c61dc1f..d79b0e431 100644 --- a/src/widget/date/calendar/trigger.triangle.date.js +++ b/src/widget/date/calendar/trigger.triangle.date.js @@ -1,66 +1,73 @@ +import { shortcut, extend, createWidget } from "@/core"; +import { Trigger } from "@/base"; + /** * 日期控件中的年份或月份trigger * * Created by GUY on 2015/9/7. - * @class BI.DateTriangleTrigger - * @extends BI.Trigger + * @class DateTriangleTrigger + * @extends Trigger */ -BI.DateTriangleTrigger = BI.inherit(BI.Trigger, { - _const: { +@shortcut() +export class DateTriangleTrigger extends Trigger { + static xtype = "bi.date_triangle_trigger" + + _const = { height: 24, iconWidth: 12, - iconHeight: 12 - }, + iconHeight: 12, + }; - _defaultConfig: function () { - return BI.extend( BI.DateTriangleTrigger.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-date-triangle-trigger solid-triangle-bottom-font cursor-pointer", - height: 24 + height: 24, }); - }, - _init: function () { - BI.DateTriangleTrigger.superclass._init.apply(this, arguments); - var o = this.options, c = this._const; - this.text = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const o = this.options, + c = this._const; + this.text = createWidget({ type: "bi.label", cls: "list-item-text", textAlign: "right", text: o.text, value: o.value, - height: c.height + height: c.height, }); - BI.createWidget({ + createWidget({ type: "bi.vertical_adapt", element: this, items: [{ el: this.text, - rgap: 5 + rgap: 5, }, { type: "bi.icon_label", - width: 16 - }] + width: 16, + }], }); - }, + } - setValue: function (v) { + setValue(v) { this.text.setValue(v); - }, + } - getValue: function () { + getValue() { return this.text.getValue(); - }, + } - setText: function (v) { + setText(v) { this.text.setText(v); - }, + } - getText: function () { + getText() { return this.item.getText(); - }, + } - getKey: function () { + getKey() { } -}); -BI.shortcut("bi.date_triangle_trigger", BI.DateTriangleTrigger); \ No newline at end of file +} diff --git a/src/widget/index.js b/src/widget/index.js new file mode 100644 index 000000000..9e92a96ba --- /dev/null +++ b/src/widget/index.js @@ -0,0 +1,12 @@ +import { Collapse } from "./collapse/collapse"; +import * as calendar from "./date/calendar"; + +Object.assign(BI, { + Collapse, + ...calendar, +}); + +export * from "./date/calendar"; +export { + Collapse +};