Browse Source

Merge branch 'es6' of ssh://code.fineres.com:7999/~dailer/fineui into es6

es6
zsmj 2 years ago
parent
commit
fc5637a162
  1. 6
      .eslintrc
  2. 4
      es6.js
  3. 14
      src/base/combination/navigation.js
  4. 24
      src/case/checkbox/check.arrownode.js
  5. 22
      src/case/checkbox/check.checkingmarknode.js
  6. 27
      src/case/checkbox/check.first.treenode.js
  7. 27
      src/case/checkbox/check.last.treenode.js
  8. 27
      src/case/checkbox/check.mid.treenode.js
  9. 27
      src/case/checkbox/check.treenode.js
  10. 6
      src/case/checkbox/index.js
  11. 2
      src/core/index.js
  12. 2
      src/core/wrapper/layout/flex/flex.vertical.js
  13. 2
      src/core/wrapper/layout/layout.card.js
  14. 108
      src/widget/collapse/collapse.js
  15. 77
      src/widget/date/calendar/combo.month.date.js
  16. 85
      src/widget/date/calendar/combo.year.date.js
  17. 8
      src/widget/date/calendar/index.js
  18. 234
      src/widget/date/calendar/picker.date.js
  19. 138
      src/widget/date/calendar/picker.year.js
  20. 142
      src/widget/date/calendar/popup.calendar.date.js
  21. 91
      src/widget/date/calendar/popup.month.js
  22. 129
      src/widget/date/calendar/popup.year.js
  23. 69
      src/widget/date/calendar/trigger.triangle.date.js
  24. 12
      src/widget/index.js

6
.eslintrc

@ -41,8 +41,8 @@
}, { }, {
"files": ["webpack/*.js", "./*.js", "lib/**/*.js", "lib/*.js", "./bin/*.js", "./bin/**/*.js"], "files": ["webpack/*.js", "./*.js", "lib/**/*.js", "lib/*.js", "./bin/*.js", "./bin/**/*.js"],
"extends": "plugin:@fui/esnext" "extends": "plugin:@fui/esnext"
}, { // }, {
"files": ["types/*.ts", "typescript/*.ts","typescript/**/*.ts"], // "files": ["types/*.ts", "typescript/*.ts","typescript/**/*.ts"],
"extends": "plugin:@fui/typescript" // "extends": "plugin:@fui/typescript"
}] }]
} }

4
es6.js

@ -197,7 +197,9 @@ ${M}
} }
`; `;
const prettierCode = prettier.format(outputCode); const prettierCode = prettier.format(outputCode, {
tabWidth: 4,
});
fs.writeFileSync(srcName, prettierCode); fs.writeFileSync(srcName, prettierCode);
await fix(srcName); await fix(srcName);

14
src/base/combination/navigation.js

@ -18,9 +18,7 @@ export class Navigation extends Widget {
single: false, single: false,
showIndex: false, showIndex: false,
tab: false, tab: false,
cardCreator: (v) => { cardCreator: v => createWidget(),
return createWidget();
},
afterCardCreated: BI.emptyFn, afterCardCreated: BI.emptyFn,
afterCardShow: BI.emptyFn, afterCardShow: BI.emptyFn,
@ -45,13 +43,12 @@ export class Navigation extends Widget {
new ShowListener({ new ShowListener({
eventObj: this.tab, eventObj: this.tab,
cardLayout: this.layout, cardLayout: this.layout,
cardNameCreator: (v) => { cardNameCreator: v => this.showIndex + v,
return this.showIndex + v; cardCreator: v => {
},
cardCreator: (v) => {
Widget.execWithContext(this, () => { Widget.execWithContext(this, () => {
this.cardMap[v] = cardCreator(v); this.cardMap[v] = cardCreator(v);
}); });
return this.cardMap[v]; return this.cardMap[v];
}, },
afterCardCreated: bind(this.afterCardCreated, this), afterCardCreated: bind(this.afterCardCreated, this),
@ -76,7 +73,7 @@ export class Navigation extends Widget {
const { single } = this.options; const { single } = this.options;
if (single === true) { if (single === true) {
each(this.cardMap, (name, card) => { each(this.cardMap, (name, card) => {
if (name !== (currCardName + "")) { if (name !== (`${currCardName}`)) {
this.layout.deleteCardByName(name); this.layout.deleteCardByName(name);
delete this.cardMap[name]; delete this.cardMap[name];
} }
@ -170,6 +167,5 @@ export class Navigation extends Widget {
destroy() { destroy() {
super.destroy(arguments); super.destroy(arguments);
} }
} }

24
src/case/checkbox/check.arrownode.js

@ -2,24 +2,28 @@
* Created by roy on 15/10/16. * 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 { 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", expandIcon: "expander-down-font",
collapseIcon: "expander-right-font" collapseIcon: "expander-right-font",
}; };
}, }
setSelected: function (v) { setSelected(v) {
var o = this.options; const o = this.options;
BI.ArrowTreeGroupNodeCheckbox.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
if (v) { if (v) {
this.element.removeClass(o.collapseIcon).addClass(o.expandIcon); this.element.removeClass(o.collapseIcon).addClass(o.expandIcon);
} else { } else {
this.element.removeClass(o.expandIcon).addClass(o.collapseIcon); this.element.removeClass(o.expandIcon).addClass(o.collapseIcon);
} }
} }
}); }
BI.shortcut("bi.arrow_group_node_checkbox", BI.ArrowTreeGroupNodeCheckbox);

22
src/case/checkbox/check.checkingmarknode.js

@ -3,19 +3,23 @@
* @class BI.CheckingMarkNode * @class BI.CheckingMarkNode
* @extends BI.IconButton * @extends BI.IconButton
*/ */
BI.CheckingMarkNode = BI.inherit(BI.IconButton, { import { extend, shortcut } from "@/core";
_defaultConfig: function () { import { IconButton } from "@/base";
return BI.extend( BI.CheckingMarkNode.superclass._defaultConfig.apply(this, arguments), {
});
},
setSelected: function (v) { @shortcut()
BI.CheckingMarkNode.superclass.setSelected.apply(this, arguments); 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) { if (v === true) {
this.element.addClass("check-mark-font"); this.element.addClass("check-mark-font");
} else { } else {
this.element.removeClass("check-mark-font"); this.element.removeClass("check-mark-font");
} }
} }
}); }
BI.shortcut("bi.checking_mark_node", BI.CheckingMarkNode);

27
src/case/checkbox/check.first.treenode.js

@ -3,31 +3,36 @@
* @class BI.FirstTreeNodeCheckbox * @class BI.FirstTreeNodeCheckbox
* @extends BI.IconButton * @extends BI.IconButton
*/ */
BI.FirstTreeNodeCheckbox = BI.inherit(BI.IconButton, { import { extend, shortcut } from "@/core";
_defaultConfig: function () { import { IconButton } from "@/base";
return BI.extend( BI.FirstTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
@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", extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2",
iconWidth: 24, iconWidth: 24,
iconHeight: 24 iconHeight: 24,
}); });
}, }
getLineCls: function () { getLineCls() {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid": case "solid":
return "tree-solid-expand-icon-type2"; return "tree-solid-expand-icon-type2";
default: default:
return "tree-expand-icon-type2"; return "tree-expand-icon-type2";
} }
}, }
setSelected: function (v) { setSelected(v) {
BI.FirstTreeNodeCheckbox.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
if (v === true) { if (v === true) {
this.element.addClass(this.getLineCls()); this.element.addClass(this.getLineCls());
} else { } else {
this.element.removeClass(this.getLineCls()); this.element.removeClass(this.getLineCls());
} }
} }
}); }
BI.shortcut("bi.first_tree_node_checkbox", BI.FirstTreeNodeCheckbox);

27
src/case/checkbox/check.last.treenode.js

@ -3,31 +3,36 @@
* @class BI.LastTreeNodeCheckbox * @class BI.LastTreeNodeCheckbox
* @extends BI.IconButton * @extends BI.IconButton
*/ */
BI.LastTreeNodeCheckbox = BI.inherit(BI.IconButton, { import { extend, shortcut } from "@/core";
_defaultConfig: function () { import { IconButton } from "@/base";
return BI.extend(BI.LastTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
@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", extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4",
iconWidth: 24, iconWidth: 24,
iconHeight: 24 iconHeight: 24,
}); });
}, }
getLineCls: function () { getLineCls() {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid": case "solid":
return "tree-solid-expand-icon-type4"; return "tree-solid-expand-icon-type4";
default: default:
return "tree-expand-icon-type4"; return "tree-expand-icon-type4";
} }
}, }
setSelected: function (v) { setSelected(v) {
BI.LastTreeNodeCheckbox.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
if (v === true) { if (v === true) {
this.element.addClass(this.getLineCls()); this.element.addClass(this.getLineCls());
} else { } else {
this.element.removeClass(this.getLineCls()); this.element.removeClass(this.getLineCls());
} }
} }
}); }
BI.shortcut("bi.last_tree_node_checkbox", BI.LastTreeNodeCheckbox);

27
src/case/checkbox/check.mid.treenode.js

@ -3,31 +3,36 @@
* @class BI.MidTreeNodeCheckbox * @class BI.MidTreeNodeCheckbox
* @extends BI.IconButton * @extends BI.IconButton
*/ */
BI.MidTreeNodeCheckbox = BI.inherit(BI.IconButton, { import { extend, shortcut } from "@/core";
_defaultConfig: function () { import { IconButton } from "@/base";
return BI.extend( BI.MidTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
@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", extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3",
iconWidth: 24, iconWidth: 24,
iconHeight: 24 iconHeight: 24,
}); });
}, }
getLineCls: function () { getLineCls() {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid": case "solid":
return "tree-solid-expand-icon-type3"; return "tree-solid-expand-icon-type3";
default: default:
return "tree-expand-icon-type3"; return "tree-expand-icon-type3";
} }
}, }
setSelected: function (v) { setSelected(v) {
BI.MidTreeNodeCheckbox.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
if (v === true) { if (v === true) {
this.element.addClass(this.getLineCls()); this.element.addClass(this.getLineCls());
} else { } else {
this.element.removeClass(this.getLineCls()); this.element.removeClass(this.getLineCls());
} }
} }
}); }
BI.shortcut("bi.mid_tree_node_checkbox", BI.MidTreeNodeCheckbox);

27
src/case/checkbox/check.treenode.js

@ -3,31 +3,36 @@
* @class BI.TreeNodeCheckbox * @class BI.TreeNodeCheckbox
* @extends BI.IconButton * @extends BI.IconButton
*/ */
BI.TreeNodeCheckbox = BI.inherit(BI.IconButton, { import { extend, shortcut } from "@/core";
_defaultConfig: function () { import { IconButton } from "@/base";
return BI.extend( BI.TreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
@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, iconWidth: 24,
iconHeight: 24 iconHeight: 24,
}); });
}, }
getLineCls: function () { getLineCls() {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) { switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid": case "solid":
return "tree-solid-expand-icon-type1"; return "tree-solid-expand-icon-type1";
default: default:
return "tree-expand-icon-type1"; return "tree-expand-icon-type1";
} }
}, }
setSelected: function (v) { setSelected(v) {
BI.TreeNodeCheckbox.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
if (v) { if (v) {
this.element.addClass(this.getLineCls()); this.element.addClass(this.getLineCls());
} else { } else {
this.element.removeClass(this.getLineCls()); this.element.removeClass(this.getLineCls());
} }
} }
}); }
BI.shortcut("bi.tree_node_checkbox", BI.TreeNodeCheckbox);

6
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";

2
src/core/index.js

@ -32,9 +32,9 @@ export * from "./structure";
export * from "./h"; export * from "./h";
export * from "./constant"; export * from "./constant";
export * from "./logic"; export * from "./logic";
export * from "./utils";
export * from "./wrapper"; export * from "./wrapper";
export * from "./platform/web"; export * from "./platform/web";
export * from "./utils";
export { export {
StyleLoaderManager, StyleLoaderManager,

2
src/core/wrapper/layout/flex/flex.vertical.js

@ -11,6 +11,8 @@ import { Layout } from "../../layout";
*/ */
@shortcut() @shortcut()
export class FlexVerticalLayout extends Layout { export class FlexVerticalLayout extends Layout {
static xtype = "bi.flex_vertical";
props() { props() {
return extend(super.props(...arguments), { return extend(super.props(...arguments), {
baseCls: "bi-f-v", baseCls: "bi-f-v",

2
src/core/wrapper/layout/layout.card.js

@ -83,7 +83,7 @@ export class CardLayout extends Layout {
} }
isCardExisted(cardName) { 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) { getCardByName(cardName) {

108
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", baseCls: "bi-collapse",
items: [], items: [],
value: [], value: [],
@ -11,98 +18,95 @@ BI.Collapse = BI.inherit(BI.Widget, {
isDefaultInit: false, isDefaultInit: false,
openMotion: { openMotion: {
animation: "bi-slide-up", animation: "bi-slide-up",
animationDuring: 200 animationDuring: 200,
}
}, },
};
render: function () { render() {
var o = this.options; 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 = {}; this.expanders = {};
return { return {
type: "bi.vertical", type: "bi.vertical",
cls: collapseCls, cls: collapseCls,
items: this._getItems(this.options.items) items: this._getItems(this.options.items),
}; };
}, }
_getItems: function (items) { _getItems(items) {
var self = this, o = this.options; const o = this.options;
return BI.map(items, function (index, item) { return map(items, (index, item) => {
var isActive = BI.contains(self._getCurrentValue(o.value), item.value); const isActive = contains(this._getCurrentValue(o.value), item.value);
var cls = o.ghost || index === 0 ? "" : "bi-border-top"; const cls = o.ghost || index === 0 ? "" : "bi-border-top";
var el = BI.extend({ const el = extend({
type: "bi.arrow_group_node", type: "bi.arrow_group_node",
height: 30, height: 30,
text: item.text, text: item.text,
value: item.value, value: item.value,
open: isActive open: isActive,
}, item.el); }, item.el);
var popup = BI.extend({ const popup = extend({
animation: o.openMotion.animation, animation: o.openMotion.animation,
animationDuring: o.openMotion.animationDuring animationDuring: o.openMotion.animationDuring,
}, item.popup); }, item.popup);
return BI.extend({ return extend({
type: "bi.expander", type: "bi.expander",
cls: cls, cls,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
trigger: o.trigger, trigger: o.trigger,
listeners: [{ listeners: [{
eventName: BI.Expander.EVENT_EXPAND, eventName: Expander.EVENT_EXPAND,
action: function () { action: () => {
self._hideOtherExpander(item.value); this._hideOtherExpander(item.value);
self.fireEvent(BI.Collapse.EVENT_EXPAND, item.value); this.fireEvent(Collapse.EVENT_EXPAND, item.value);
} },
}] }],
}, item, { }, item, {
el: el, el,
popup: popup, popup,
ref: function (_ref) { ref: _ref => {
BI.isFunction(item.ref) && item.ref(_ref); isFunction(item.ref) && item.ref(_ref);
self.expanders[item.value] = _ref; this.expanders[item.value] = _ref;
} },
}); });
}); });
}, }
_hideOtherExpander: function (expandKey) { _hideOtherExpander(expandKey) {
if (this.options.accordion) { if (this.options.accordion) {
BI.each(this.expanders, function (key, expander) { each(this.expanders, (key, expander) => {
key !== (expandKey + "") && expander.hideView(); key !== (`${expandKey}`) && expander.hideView();
}); });
} }
}, }
_getCurrentValue: function (v) { _getCurrentValue(v) {
var values = BI.isNotEmptyArray(v) ? v : BI.isKey(v) ? [v] : []; const values = isNotEmptyArray(v) ? v : isKey(v) ? [v] : [];
return this.options.accordion ? values.slice(0, 1) : values; return this.options.accordion ? values.slice(0, 1) : values;
}, }
getValue: function () { getValue() {
var value = []; const value = [];
BI.each(this.expanders, function (key, expander) { each(this.expanders, (key, expander) => {
expander.isExpanded() && value.push(key); expander.isExpanded() && value.push(key);
}); });
return value; return value;
}, }
setValue: function (v) { setValue(v) {
var values = BI.map(this._getCurrentValue(v), function (idx, value) {return value + "";}); const values = map(this._getCurrentValue(v), (idx, value) => `${value}`);
BI.each(this.expanders, function (key, expander) { each(this.expanders, (key, expander) => {
BI.contains(values, key) ? expander.showView() : expander.hideView(); contains(values, key) ? expander.showView() : expander.hideView();
}); });
} }
}); }
BI.Collapse.EVENT_EXPAND = "EVENT_EXPAND";
BI.shortcut("bi.collapse", BI.Collapse);

77
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. * Created by GUY on 2015/9/7.
* @class BI.MonthDateCombo * @class MonthDateCombo
* @extends BI.Trigger * @extends Trigger
*/ */
BI.MonthDateCombo = BI.inherit(BI.Trigger, { @shortcut()
_defaultConfig: function () { export class MonthDateCombo extends Trigger {
return BI.extend( BI.MonthDateCombo.superclass._defaultConfig.apply(this, arguments), { static xtype = "bi.month_date_combo"
static EVENT_CHANGE = "EVENT_CHANGE"
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-month-combo", baseCls: "bi-month-combo",
height: 24, height: 24,
container: null container: null,
}); });
}, }
_init: function () {
BI.MonthDateCombo.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.trigger = BI.createWidget({ _init() {
type: "bi.date_triangle_trigger" super._init(...arguments);
const o = this.options;
this.trigger = createWidget({
type: "bi.date_triangle_trigger",
}); });
this.popup = BI.createWidget({ this.popup = createWidget({
type: "bi.month_popup", type: "bi.month_popup",
allowMonths: o.allowMonths, allowMonths: o.allowMonths,
behaviors: o.behaviors behaviors: o.behaviors,
}); });
this.popup.on(BI.MonthPopup.EVENT_CHANGE, function () { this.popup.on(MonthPopup.EVENT_CHANGE, () => {
self.setValue(self.popup.getValue()); this.setValue(this.popup.getValue());
self.combo.hideView(); this.combo.hideView();
self.fireEvent(BI.MonthDateCombo.EVENT_CHANGE); this.fireEvent(MonthDateCombo.EVENT_CHANGE);
}); });
this.combo = createWidget({
this.combo = BI.createWidget({
type: "bi.combo", type: "bi.combo",
offsetStyle: "center", offsetStyle: "center",
container: o.container, container: o.container,
@ -49,28 +58,26 @@ BI.MonthDateCombo = BI.inherit(BI.Trigger, {
type: "bi.vertical", type: "bi.vertical",
hgap: 6, hgap: 6,
vgap: 5, vgap: 5,
items: [this.popup] items: [this.popup],
} },
} },
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
self.doBehavior(); this.doBehavior();
}); });
}, }
populate: function () { populate() {
this.popup.populate.apply(this.popup, arguments); this.popup.populate(...arguments);
}, }
setValue: function (v) { setValue(v) {
this.trigger.setValue(v); this.trigger.setValue(v);
this.popup.setValue(v); this.popup.setValue(v);
}, }
getValue: function () { getValue() {
return this.popup.getValue(); return this.popup.getValue();
} }
}); }
BI.MonthDateCombo.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.month_date_combo", BI.MonthDateCombo);

85
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. * Created by GUY on 2015/9/7.
* @class BI.YearDateCombo * @class YearDateCombo
* @extends BI.Trigger * @extends Trigger
*/ */
BI.YearDateCombo = BI.inherit(BI.Trigger, { @shortcut()
_defaultConfig: function () { export class YearDateCombo extends Trigger {
return BI.extend( BI.YearDateCombo.superclass._defaultConfig.apply(this, arguments), { 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", baseCls: "bi-year-combo",
min: "1900-01-01", // 最小日期 min: "1900-01-01", // 最小日期
max: "2099-12-31", // 最大日期 max: "2099-12-31", // 最大日期
behaviors: {}, behaviors: {},
height: 24, height: 24,
container: null container: null,
}); });
}, }
_init: function () {
BI.YearDateCombo.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.trigger = BI.createWidget({ _init() {
type: "bi.date_triangle_trigger" super._init(...arguments);
const o = this.options;
this.trigger = createWidget({
type: "bi.date_triangle_trigger",
}); });
this.popup = BI.createWidget({ this.popup = createWidget({
type: "bi.year_popup", type: "bi.year_popup",
behaviors: o.behaviors, behaviors: o.behaviors,
min: o.min, min: o.min,
max: o.max, max: o.max,
width: 122 width: 122,
}); });
this.popup.on(BI.YearPopup.EVENT_CHANGE, function () { this.popup.on(YearPopup.EVENT_CHANGE, () => {
self.setValue(self.popup.getValue()); this.setValue(this.popup.getValue());
self.combo.hideView(); this.combo.hideView();
self.fireEvent(BI.YearDateCombo.EVENT_CHANGE); this.fireEvent(YearDateCombo.EVENT_CHANGE);
}); });
this.combo = createWidget({
this.combo = BI.createWidget({
type: "bi.combo", type: "bi.combo",
offsetStyle: "center", offsetStyle: "center",
element: this, element: this,
@ -50,36 +60,33 @@ BI.YearDateCombo = BI.inherit(BI.Trigger, {
popup: { popup: {
minWidth: 100, minWidth: 100,
stopPropagation: false, stopPropagation: false,
el: this.popup el: this.popup,
} },
}); });
this.combo.on(BI.Combo.EVENT_CHANGE, function () { this.combo.on(Combo.EVENT_CHANGE, () => {
self.fireEvent(BI.YearDateCombo.EVENT_CHANGE); this.fireEvent(YearDateCombo.EVENT_CHANGE);
}); });
// BI-22551 popup未初始化传入的behavior无效 // BI-22551 popup未初始化传入的behavior无效
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
self.doBehavior(); this.doBehavior();
self.fireEvent(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW); this.fireEvent(YearDateCombo.EVENT_BEFORE_POPUPVIEW);
}); });
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
this.popup.setMinDate(minDate); this.popup.setMinDate(minDate);
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
this.popup.setMaxDate(maxDate); this.popup.setMaxDate(maxDate);
}, }
setValue: function (v) { setValue(v) {
this.trigger.setValue(v); this.trigger.setValue(v);
this.popup.setValue(v); this.popup.setValue(v);
}, }
getValue: function () { getValue() {
return this.popup.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);

8
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";

234
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. * Created by GUY on 2015/9/7.
* @class BI.DatePicker * @class DatePicker
* @extends BI.Widget * @extends Widget
*/ */
BI.DatePicker = BI.inherit(BI.Widget, { @shortcut()
_defaultConfig: function () { export class DatePicker extends Widget {
var conf = BI.DatePicker.superclass._defaultConfig.apply(this, arguments); 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", baseCls: "bi-date-picker",
height: 40, height: 40,
min: "1900-01-01", // 最小日期 min: "1900-01-01", // 最小日期
max: "2099-12-31" // 最大日期 max: "2099-12-31", // 最大日期
}); });
}, }
_init: function () { _init() {
BI.DatePicker.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this; const o = this.options;
var o = this.options; this._year = getDate().getFullYear();
this._year = BI.getDate().getFullYear(); this._month = getDate().getMonth() + 1;
this._month = BI.getDate().getMonth() + 1; this.left = createWidget({
this.left = BI.createWidget({
type: "bi.icon_button", type: "bi.icon_button",
cls: "pre-page-h-font", cls: "pre-page-h-font",
width: 24, width: 24,
height: 24 height: 24,
}); });
this.left.on(BI.IconButton.EVENT_CHANGE, function () { this.left.on(IconButton.EVENT_CHANGE, () => {
if (self._month === 1) { if (this._month === 1) {
self.setValue({ this.setValue({
year: (self.year.getValue() - 1) || (BI.getDate().getFullYear() - 1), year: (this.year.getValue() - 1) || (getDate().getFullYear() - 1),
month: 12 month: 12,
}); });
} else { } else {
self.setValue({ this.setValue({
year: self.year.getValue() || BI.getDate().getFullYear(), year: this.year.getValue() || getDate().getFullYear(),
month: (self.month.getValue() - 1) || BI.getDate().getMonth() month: (this.month.getValue() - 1) || getDate().getMonth(),
}); });
} }
self.fireEvent(BI.DatePicker.EVENT_CHANGE); this.fireEvent(DatePicker.EVENT_CHANGE);
// self._checkLeftValid(); // this._checkLeftValid();
// self._checkRightValid(); // this._checkRightValid();
}); });
this.right = BI.createWidget({ this.right = createWidget({
type: "bi.icon_button", type: "bi.icon_button",
cls: "next-page-h-font", cls: "next-page-h-font",
width: 24, width: 24,
height: 24 height: 24,
}); });
this.right.on(BI.IconButton.EVENT_CHANGE, function () { this.right.on(IconButton.EVENT_CHANGE, () => {
if (self._month === 12) { if (this._month === 12) {
self.setValue({ this.setValue({
year: (self.year.getValue() + 1) || (BI.getDate().getFullYear() + 1), year: (this.year.getValue() + 1) || (getDate().getFullYear() + 1),
month: 1 month: 1,
}); });
} else { } else {
self.setValue({ this.setValue({
year: self.year.getValue() || BI.getDate().getFullYear(), year: this.year.getValue() || getDate().getFullYear(),
month: (self.month.getValue() + 1) || (BI.getDate().getMonth() + 2) month: (this.month.getValue() + 1) || (getDate().getMonth() + 2),
}); });
} }
self.fireEvent(BI.DatePicker.EVENT_CHANGE); this.fireEvent(DatePicker.EVENT_CHANGE);
// self._checkLeftValid(); // this._checkLeftValid();
// self._checkRightValid(); // this._checkRightValid();
}); });
this.year = BI.createWidget({ this.year = createWidget({
type: "bi.year_date_combo", type: "bi.year_date_combo",
behaviors: o.behaviors, behaviors: o.behaviors,
min: o.min, min: o.min,
max: o.max max: o.max,
}); });
this.year.on(BI.YearDateCombo.EVENT_CHANGE, function () { this.year.on(YearDateCombo.EVENT_CHANGE, () => {
self.setValue({ this.setValue({
year: self.year.getValue(), year: this.year.getValue(),
month: self._refreshMonth() month: this._refreshMonth(),
}); });
self.fireEvent(BI.DatePicker.EVENT_CHANGE); this.fireEvent(DatePicker.EVENT_CHANGE);
}); });
this.year.on(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW, function () { this.year.on(YearDateCombo.EVENT_BEFORE_POPUPVIEW, () => {
self.fireEvent(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); this.fireEvent(DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
}); });
this.month = BI.createWidget({ this.month = createWidget({
type: "bi.month_date_combo", type: "bi.month_date_combo",
behaviors: o.behaviors, behaviors: o.behaviors,
allowMonths: this._getAllowMonths() allowMonths: this._getAllowMonths(),
}); });
this.month.on(BI.MonthDateCombo.EVENT_CHANGE, function () { this.month.on(MonthDateCombo.EVENT_CHANGE, () => {
self.setValue({ this.setValue({
year: self.year.getValue() || self._year, year: this.year.getValue() || this._year,
month: self.month.getValue() month: this.month.getValue(),
}); });
self.fireEvent(BI.DatePicker.EVENT_CHANGE); this.fireEvent(DatePicker.EVENT_CHANGE);
}); });
this.month.on(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW, function () { this.month.on(YearDateCombo.EVENT_BEFORE_POPUPVIEW, () => {
self.fireEvent(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); this.fireEvent(DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
}); });
BI.createWidget({ createWidget({
type: "bi.htape", type: "bi.htape",
element: this, element: this,
items: [{ items: [{
el: { el: {
type: "bi.center_adapt", type: "bi.center_adapt",
items: [this.left] items: [this.left],
}, },
width: 24 width: 24,
}, { }, {
el: { el: {
type: "bi.center_adapt", type: "bi.center_adapt",
hgap: 10, hgap: 10,
items: [this.year, this.month] items: [this.year, this.month],
} },
}, { }, {
el: { el: {
type: "bi.center_adapt", type: "bi.center_adapt",
items: [this.right] items: [this.right],
}, },
width: 24 width: 24,
}] }],
}); });
this.setValue({ this.setValue({
year: this._year, year: this._year,
month: this._month month: this._month,
}); });
}, }
_refreshMonth: function (defaultMonth) { _refreshMonth(defaultMonth) {
var month = this.month.getValue(); let month = this.month.getValue();
this.month.populate(this._getAllowMonths()); this.month.populate(this._getAllowMonths());
var allowMonth = this._getAllowMonths(); const allowMonth = this._getAllowMonths();
if (!BI.contains(allowMonth, month)) { if (!contains(allowMonth, month)) {
month = defaultMonth || allowMonth[0]; month = defaultMonth || allowMonth[0];
} }
this.month.setValue(month); this.month.setValue(month);
return month; return month;
}, }
_getAllowMonths: function () { _getAllowMonths() {
var obj = this._getCheckMinMaxDate(); const obj = this._getCheckMinMaxDate();
var year = this.year.getValue() || this._year; const year = this.year.getValue() || this._year;
return BI.filter(BI.range(1, 13), function (idx, v) { return filter(range(1, 13), (idx, v) => !checkDateVoid(year, v, 1, obj.min, obj.max)[0]);
return !BI.checkDateVoid(year, v, 1, obj.min, obj.max)[0]; }
});
},
// 上一年月不合法则灰化 _checkLeftValid() {
_checkLeftValid: function () { const obj = this._getCheckMinMaxDate();
var obj = this._getCheckMinMaxDate(); const year = this._month === 1 ? this._year - 1 : this._year;
var year = this._month === 1 ? this._year - 1 : this._year; const month = this._month === 1 ? 12 : this._month - 1;
var month = this._month === 1 ? 12 : this._month - 1; const valid = isNull(checkDateVoid(year, month, 1, obj.min, obj.max)[0]);
var valid = BI.isNull(BI.checkDateVoid(year, month, 1, obj.min, obj.max)[0]);
this.left.setEnable(valid); this.left.setEnable(valid);
return valid; return valid;
}, }
// 下一年月不合法则灰化 _checkRightValid() {
_checkRightValid: function () { const obj = this._getCheckMinMaxDate();
var obj = this._getCheckMinMaxDate(); const year = this._month === 12 ? this._year + 1 : this._year;
var year = this._month === 12 ? this._year + 1 : this._year; const month = this._month === 12 ? 1 : this._month + 1;
var month = this._month === 12 ? 1 : this._month + 1; const valid = isNull(checkDateVoid(year, month, 1, obj.min, obj.max)[0]);
var valid = BI.isNull(BI.checkDateVoid(year, month, 1, obj.min, obj.max)[0]);
this.right.setEnable(valid); this.right.setEnable(valid);
return valid; return valid;
}, }
_getCheckMinMaxDate: function () { _getCheckMinMaxDate() {
var o = this.options; const o = this.options;
var minDate = BI.parseDateTime(o.min, "%Y-%X-%d"); const minDate = parseDateTime(o.min, "%Y-%X-%d");
var maxDate = BI.parseDateTime(o.max, "%Y-%X-%d"); const maxDate = parseDateTime(o.max, "%Y-%X-%d");
minDate.setDate(1); minDate.setDate(1);
maxDate.setDate(1); maxDate.setDate(1);
return { return {
min: BI.print(minDate, "%Y-%X-%d"), min: print(minDate, "%Y-%X-%d"),
max: BI.print(maxDate, "%Y-%X-%d") max: print(maxDate, "%Y-%X-%d"),
}; };
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
this.options.min = minDate; this.options.min = minDate;
this.year.setMinDate(minDate); this.year.setMinDate(minDate);
this._refreshMonth(this._month); this._refreshMonth(this._month);
// this._checkLeftValid(); // this._checkLeftValid();
// this._checkRightValid(); // this._checkRightValid();
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
this.options.max = maxDate; this.options.max = maxDate;
this.year.setMaxDate(maxDate); this.year.setMaxDate(maxDate);
this._refreshMonth(this._month); this._refreshMonth(this._month);
// this._checkLeftValid(); // this._checkLeftValid();
// this._checkRightValid(); // this._checkRightValid();
}, }
setValue: function (ob) { setValue(ob) {
this._year = BI.parseInt(ob.year); this._year = parseInt(ob.year);
this._month = BI.parseInt(ob.month); this._month = parseInt(ob.month);
this.year.setValue(ob.year); this.year.setValue(ob.year);
this._refreshMonth(this._month); this._refreshMonth(this._month);
this.month.setValue(ob.month); this.month.setValue(ob.month);
// this._checkLeftValid(); // this._checkLeftValid();
// this._checkRightValid(); // this._checkRightValid();
}, }
getValue: function () { getValue() {
return { return {
year: this.year.getValue(), 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);

138
src/widget/date/calendar/picker.year.js

@ -1,131 +1,135 @@
/** import { shortcut, Widget, extend, createWidget, getDate, parseDateTime } from "@/core";
* Created by GUY on 2015/9/7. import { IconButton } from "@/base";
* @class BI.YearPicker import { YearDateCombo } from "./combo.year.date";
* @extends BI.Widget
*/ @shortcut()
BI.YearPicker = BI.inherit(BI.Widget, { export class YearPicker extends Widget {
_defaultConfig: function () { static xtype = "bi.year_picker"
var conf = BI.YearPicker.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { 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", baseCls: "bi-year-picker",
behaviors: {}, behaviors: {},
height: 40, height: 40,
min: "1900-01-01", // 最小日期 min: "1900-01-01", // 最小日期
max: "2099-12-31" // 最大日期 max: "2099-12-31", // 最大日期
}); });
}, }
_init: function () { _init() {
BI.YearPicker.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this._year = BI.getDate().getFullYear(); this._year = getDate().getFullYear();
this.left = BI.createWidget({ this.left = createWidget({
type: "bi.icon_button", type: IconButton.xtype,
cls: "pre-page-h-font", cls: "pre-page-h-font",
width: 25, width: 25,
height: 25 height: 25,
}); });
this.left.on(BI.IconButton.EVENT_CHANGE, function () { this.left.on(IconButton.EVENT_CHANGE, () => {
self.setValue(self.year.getValue() - 1); this.setValue(this.year.getValue() - 1);
self.fireEvent(BI.YearPicker.EVENT_CHANGE); this.fireEvent(YearPicker.EVENT_CHANGE);
// self._checkLeftValid(); // this._checkLeftValid();
// self._checkRightValid(); // this._checkRightValid();
}); });
this.right = BI.createWidget({ this.right = createWidget({
type: "bi.icon_button", type: IconButton.xtype,
cls: "next-page-h-font", cls: "next-page-h-font",
width: 25, width: 25,
height: 25 height: 25,
}); });
this.right.on(BI.IconButton.EVENT_CHANGE, function () { this.right.on(IconButton.EVENT_CHANGE, () => {
self.setValue(self.year.getValue() + 1); this.setValue(this.year.getValue() + 1);
self.fireEvent(BI.YearPicker.EVENT_CHANGE); this.fireEvent(YearPicker.EVENT_CHANGE);
// self._checkLeftValid(); // this._checkLeftValid();
// self._checkRightValid(); // this._checkRightValid();
}); });
this.year = BI.createWidget({ this.year = createWidget({
type: "bi.year_date_combo", type: "bi.year_date_combo",
min: o.min, min: o.min,
behaviors: o.behaviors, behaviors: o.behaviors,
max: o.max, max: o.max,
width: 50 width: 50,
}); });
this.year.on(BI.YearDateCombo.EVENT_CHANGE, function () { this.year.on(YearDateCombo.EVENT_CHANGE, () => {
self.setValue(self.year.getValue()); this.setValue(this.year.getValue());
self.fireEvent(BI.YearPicker.EVENT_CHANGE); this.fireEvent(YearPicker.EVENT_CHANGE);
}); });
this.year.on(BI.YearDateCombo.EVENT_BEFORE_POPUPVIEW, function () { this.year.on(YearDateCombo.EVENT_BEFORE_POPUPVIEW, () => {
self.fireEvent(BI.YearPicker.EVENT_BEFORE_POPUPVIEW); this.fireEvent(YearPicker.EVENT_BEFORE_POPUPVIEW);
}); });
BI.createWidget({ createWidget({
type: "bi.htape", type: "bi.htape",
element: this, element: this,
items: [{ items: [{
el: { el: {
type: "bi.center_adapt", type: "bi.center_adapt",
items: [this.left] items: [this.left],
}, },
width: 25 width: 25,
}, { }, {
type: "bi.center_adapt", type: "bi.center_adapt",
items: [{ items: [{
el: this.year el: this.year,
}] }],
}, { }, {
el: { el: {
type: "bi.center_adapt", type: "bi.center_adapt",
items: [this.right] items: [this.right],
}, },
width: 25 width: 25,
}] }],
}); });
this.setValue(this._year); this.setValue(this._year);
}, }
_checkLeftValid: function () { _checkLeftValid() {
var o = this.options; const o = this.options;
var valid = this._year > BI.parseDateTime(o.min, "%Y-%X-%d").getFullYear(); const valid = this._year > parseDateTime(o.min, "%Y-%X-%d").getFullYear();
this.left.setEnable(valid); this.left.setEnable(valid);
return valid; return valid;
}, }
_checkRightValid: function () { _checkRightValid() {
var o = this.options; const o = this.options;
var valid = this._year < BI.parseDateTime(o.max, "%Y-%X-%d").getFullYear(); const valid = this._year < parseDateTime(o.max, "%Y-%X-%d").getFullYear();
this.right.setEnable(valid); this.right.setEnable(valid);
return valid; return valid;
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
this.options.min = minDate; this.options.min = minDate;
this.year.setMinDate(minDate); this.year.setMinDate(minDate);
// this._checkLeftValid(); // this._checkLeftValid();
// this._checkRightValid(); // this._checkRightValid();
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
this.options.max = maxDate; this.options.max = maxDate;
this.year.setMaxDate(maxDate); this.year.setMaxDate(maxDate);
// this._checkLeftValid(); // this._checkLeftValid();
// this._checkRightValid(); // this._checkRightValid();
}, }
setValue: function (v) { setValue(v) {
this._year = v; this._year = v;
this.year.setValue(v); this.year.setValue(v);
// this._checkLeftValid(); // this._checkLeftValid();
// this._checkRightValid(); // this._checkRightValid();
}, }
getValue: function () { getValue() {
return this.year.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);

142
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. * Created by GUY on 2015/9/7.
* @class BI.DateCalendarPopup * @class DateCalendarPopup
* @extends BI.Widget * @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", baseCls: "bi-date-calendar-popup",
min: "1900-01-01", // 最小日期 min: "1900-01-01",
max: "2099-12-31", // 最大日期 max: "2099-12-31",
selectedTime: null selectedTime: null,
}, };
_createNav: function (v) { static EVENT_CHANGE = "EVENT_CHANGE"
var date = BI.Calendar.getDateJSONByPage(v); static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"
var calendar = BI.createWidget({
_createNav(v) {
const date = Calendar.getDateJSONByPage(v);
const calendar = createWidget({
type: "bi.calendar", type: "bi.calendar",
logic: { logic: {
dynamic: true dynamic: true,
}, },
min: this.options.min, min: this.options.min,
max: this.options.max, max: this.options.max,
year: date.year, year: date.year,
month: date.month, month: date.month,
// BI-45616 此处为确定当前应该展示哪个年月对应的Calendar, day不是关键数据, 给1号就可 // BI-45616 此处为确定当前应该展示哪个年月对应的Calendar, day不是关键数据, 给1号就可
day: 1 day: 1,
}); });
return calendar; return calendar;
}, }
render: function () { render() {
var self = this, const o = this.options;
o = this.options; this.today = getDate();
this.today = BI.getDate();
this._year = this.today.getFullYear(); this._year = this.today.getFullYear();
this._month = this.today.getMonth() + 1; this._month = this.today.getMonth() + 1;
this._day = this.today.getDate(); this._day = this.today.getDate();
@ -40,47 +51,47 @@ BI.DateCalendarPopup = BI.inherit(BI.Widget, {
this.selectedTime = o.selectedTime || { this.selectedTime = o.selectedTime || {
year: this._year, year: this._year,
month: this._month, month: this._month,
day: this._day day: this._day,
}; };
this.datePicker = BI.createWidget({ this.datePicker = createWidget({
type: "bi.date_picker", type: "bi.date_picker",
behaviors: o.behaviors, behaviors: o.behaviors,
min: o.min, min: o.min,
max: o.max max: o.max,
}); });
this.calendar = BI.createWidget({ this.calendar = createWidget({
direction: "top", direction: "top",
logic: { logic: {
dynamic: true dynamic: true,
}, },
type: "bi.navigation", type: "bi.navigation",
tab: this.datePicker, tab: this.datePicker,
cardCreator: BI.bind(this._createNav, this), cardCreator: bind(this._createNav, this),
afterCardCreated: function () { afterCardCreated () {
}, },
afterCardShow: function () { afterCardShow: () => {
this.setValue(self.selectedTime); this.calendar.setValue(this.selectedTime);
} },
}); });
this.datePicker.on(BI.DatePicker.EVENT_CHANGE, function () { this.datePicker.on(DatePicker.EVENT_CHANGE, () => {
self.selectedTime = self.datePicker.getValue(); this.selectedTime = this.datePicker.getValue();
self.selectedTime.day = 1; this.selectedTime.day = 1;
self.calendar.setSelect(BI.Calendar.getPageByDateJSON(self.selectedTime)); this.calendar.setSelect(Calendar.getPageByDateJSON(this.selectedTime));
}); });
this.datePicker.on(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, function () { this.datePicker.on(DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, () => {
self.fireEvent(BI.DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); this.fireEvent(DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
}); });
this.calendar.on(BI.Navigation.EVENT_CHANGE, function () { this.calendar.on(Navigation.EVENT_CHANGE, () => {
self.selectedTime = self.calendar.getValue(); this.selectedTime = this.calendar.getValue();
self.setValue(self.selectedTime); this.setValue(this.selectedTime);
self.fireEvent(BI.DateCalendarPopup.EVENT_CHANGE); this.fireEvent(DateCalendarPopup.EVENT_CHANGE);
}); });
return [{ return [{
@ -88,64 +99,61 @@ BI.DateCalendarPopup = BI.inherit(BI.Widget, {
items: [{ items: [{
el: this.calendar, el: this.calendar,
hgap: 12, hgap: 12,
bgap: 7 bgap: 7,
}] }],
}, { }, {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: { el: {
type: "bi.layout", type: "bi.layout",
cls: "bi-split-top" cls: "bi-split-top",
}, },
height: 1, height: 1,
top: 40, top: 40,
left: 0, left: 0,
right: 0 right: 0,
}] }],
}] }];
}, }
_checkMin: function () { _checkMin() {
var o = this.options; const o = this.options;
BI.each(this.calendar.getAllCard(), function (idx, calendar) { each(this.calendar.getAllCard(), (idx, calendar) => {
calendar.setMinDate(o.min); calendar.setMinDate(o.min);
}); });
}, }
_checkMax: function () { _checkMax() {
var o = this.options; const o = this.options;
BI.each(this.calendar.getAllCard(), function (idx, calendar) { each(this.calendar.getAllCard(), (idx, calendar) => {
calendar.setMaxDate(o.max); calendar.setMaxDate(o.max);
}); });
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
if (BI.isNotEmptyString(this.options.min)) { if (isNotEmptyString(this.options.min)) {
this.options.min = minDate; this.options.min = minDate;
this.datePicker.setMinDate(minDate); this.datePicker.setMinDate(minDate);
this._checkMin(); this._checkMin();
} }
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
if (BI.isNotEmptyString(this.options.max)) { if (isNotEmptyString(this.options.max)) {
this.options.max = maxDate; this.options.max = maxDate;
this.datePicker.setMaxDate(maxDate); this.datePicker.setMaxDate(maxDate);
this._checkMax(); this._checkMax();
} }
}, }
setValue: function (timeOb) { setValue(timeOb) {
this.datePicker.setValue(timeOb); this.datePicker.setValue(timeOb);
this.calendar.setSelect(BI.Calendar.getPageByDateJSON(timeOb)); this.calendar.setSelect(Calendar.getPageByDateJSON(timeOb));
this.calendar.setValue(timeOb); this.calendar.setValue(timeOb);
this.selectedTime = timeOb; this.selectedTime = timeOb;
}, }
getValue: function () { getValue() {
return this.selectedTime; 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);

91
src/widget/date/calendar/popup.month.js

@ -1,66 +1,72 @@
import { shortcut, Widget, extend, Controller, createWidget, Events, createItems, toPix, map, contains, getDate, LogicFactory, parseInt } from "@/core";
/** /**
* 月份展示面板 * 月份展示面板
* *
* Created by GUY on 2015/9/2. * Created by GUY on 2015/9/2.
* @class BI.MonthPopup * @class MonthPopup
* @extends BI.Trigger * @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 () { _defaultConfig() {
return BI.extend(BI.MonthPopup.superclass._defaultConfig.apply(this, arguments), { return extend(super._defaultConfig(...arguments), {
baseCls: "bi-month-popup", baseCls: "bi-month-popup",
behaviors: {} behaviors: {},
}); });
}, }
_init: function () { _init() {
BI.MonthPopup.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; 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", type: "bi.button_group",
element: this, element: this,
behaviors: o.behaviors, behaviors: o.behaviors,
items: BI.createItems(this._getItems(o.allowMonths), {}), items: createItems(this._getItems(o.allowMonths), {}),
layouts: [BI.LogicFactory.createLogic("table", BI.extend({ layouts: [LogicFactory.createLogic("table", extend({
dynamic: true dynamic: true,
}, { }, {
columns: 2, columns: 2,
rows: 6, rows: 6,
columnSize: [1 / 2, 1 / 2], 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", type: "bi.center_adapt",
vgap: 2, vgap: 2,
}], }],
value: o.value value: o.value,
}); });
this.month.on(BI.Controller.EVENT_CHANGE, function (type, value) { this.month.on(Controller.EVENT_CHANGE, (...args) => {
self.selectedMonth = value; const [type, value] = args;
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.selectedMonth = value;
if (type === BI.Events.CLICK) { this.fireEvent(Controller.EVENT_CHANGE, ...args);
self.fireEvent(BI.MonthPopup.EVENT_CHANGE); if (type === Events.CLICK) {
this.fireEvent(MonthPopup.EVENT_CHANGE);
} }
}); });
}, }
_getItems: function(m) { _getItems(m) {
BI.Widget.pushContext(this); Widget.pushContext(this);
// 纵向排列月 // 纵向排列月
var month = [1, 7, 2, 8, 3, 9, 4, 10, 5, 11, 6, 12]; const month = [1, 7, 2, 8, 3, 9, 4, 10, 5, 11, 6, 12];
var items = []; let items = [];
items.push(month.slice(0, 2)); items.push(month.slice(0, 2));
items.push(month.slice(2, 4)); items.push(month.slice(2, 4));
items.push(month.slice(4, 6)); items.push(month.slice(4, 6));
items.push(month.slice(6, 8)); items.push(month.slice(6, 8));
items.push(month.slice(8, 10)); items.push(month.slice(8, 10));
items.push(month.slice(10, 12)); items.push(month.slice(10, 12));
items = BI.map(items, function (i, item) { items = map(items, (i, item) => map(item, (j, td) => {
return BI.map(item, function (j, td) {
return { return {
type: "bi.text_item", type: "bi.text_item",
cls: "bi-border-radius bi-list-item-select", cls: "bi-border-radius bi-list-item-select",
@ -68,32 +74,29 @@ BI.MonthPopup = BI.inherit(BI.Widget, {
whiteSpace: "nowrap", whiteSpace: "nowrap",
once: false, once: false,
forceSelected: true, forceSelected: true,
height: BI.toPix(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1), height: toPix(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1),
width: 30, width: 30,
value: td, value: td,
text: td, text: td,
disabled: !BI.contains(m, td) disabled: !contains(m, td),
}; };
}); }));
}); Widget.popContext();
BI.Widget.popContext();
return items; return items;
}, }
populate: function(months) { populate(months) {
this.month.populate(this._getItems(months)); this.month.populate(this._getItems(months));
}, }
getValue: function () { getValue() {
return this.selectedMonth; return this.selectedMonth;
}, }
setValue: function (v) { setValue(v) {
v = BI.parseInt(v); v = parseInt(v);
this.selectedMonth = v; this.selectedMonth = v;
this.month.setValue([v]); this.month.setValue([v]);
} }
}); }
BI.MonthPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.month_popup", BI.MonthPopup);

129
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. * Created by GUY on 2015/9/2.
* @class BI.YearPopup * @class YearPopup
* @extends BI.Trigger * @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 () { _defaultConfig() {
return BI.extend(BI.YearPopup.superclass._defaultConfig.apply(this, arguments), { return extend(super._defaultConfig(...arguments), {
baseCls: "bi-year-popup", baseCls: "bi-year-popup",
behaviors: {}, behaviors: {},
min: "1900-01-01", // 最小日期 min: "1900-01-01", // 最小日期
max: "2099-12-31" // 最大日期 max: "2099-12-31", // 最大日期
}); });
}, }
_createYearCalendar: function (v) { _createYearCalendar(v) {
var o = this.options, y = this._year; const o = this.options,
y = this._year;
var calendar = BI.createWidget({ const calendar = createWidget({
type: "bi.year_calendar", type: "bi.year_calendar",
behaviors: o.behaviors, behaviors: o.behaviors,
min: o.min, min: o.min,
max: o.max, max: o.max,
logic: { logic: {
dynamic: true dynamic: true,
}, },
year: y + v * 12 year: y + v * 12,
}); });
calendar.setValue(this._year); calendar.setValue(this._year);
return calendar; return calendar;
}, }
_init: function () { _init() {
BI.YearPopup.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; 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", type: "bi.icon_button",
cls: "pre-page-h-font", cls: "pre-page-h-font",
width: 24, width: 24,
height: 24, height: 24,
value: -1 value: -1,
}); });
this.preBtn = BI.createWidget({ this.preBtn = createWidget({
type: "bi.icon_button", type: "bi.icon_button",
cls: "next-page-h-font", cls: "next-page-h-font",
width: 24, width: 24,
height: 24, height: 24,
value: 1 value: 1,
}); });
this.navigation = BI.createWidget({ this.navigation = createWidget({
type: "bi.navigation", type: "bi.navigation",
element: this, element: this,
single: true, single: true,
logic: { logic: {
dynamic: true dynamic: true,
}, },
tab: { tab: {
cls: "year-popup-navigation bi-high-light bi-split-top", cls: "year-popup-navigation bi-high-light bi-split-top",
height: 24, 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 () { this.navigation.on(Navigation.EVENT_CHANGE, (...args) => {
self.selectedYear = this.getValue(); this.selectedYear = this.navigation.getValue();
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, ...args);
self.fireEvent(BI.YearPopup.EVENT_CHANGE, self.selectedYear); this.fireEvent(YearPopup.EVENT_CHANGE, this.selectedYear);
}); });
if(BI.isKey(o.value)){ if (isKey(o.value)) {
this.setValue(o.value); this.setValue(o.value);
} }
}, }
_checkMin: function () { _checkMin() {
var calendar = this.navigation.getSelectedCard(); const calendar = this.navigation.getSelectedCard();
if (BI.isNotNull(calendar)) { if (isNotNull(calendar)) {
calendar.setMinDate(this.options.min); calendar.setMinDate(this.options.min);
} }
}, }
_checkMax: function () { _checkMax() {
var calendar = this.navigation.getSelectedCard(); const calendar = this.navigation.getSelectedCard();
if (BI.isNotNull(calendar)) { if (isNotNull(calendar)) {
calendar.setMaxDate(this.options.max); calendar.setMaxDate(this.options.max);
} }
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
if (BI.isNotEmptyString(this.options.min)) { if (isNotEmptyString(this.options.min)) {
this.options.min = minDate; this.options.min = minDate;
this._checkMin(); this._checkMin();
} }
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
if (BI.isNotEmptyString(this.options.max)) { if (isNotEmptyString(this.options.max)) {
this.options.max = maxDate; this.options.max = maxDate;
this._checkMax(); this._checkMax();
} }
}, }
getValue: function () { getValue() {
return this.selectedYear; return this.selectedYear;
}, }
setValue: function (v) { setValue(v) {
var o = this.options; v = parseInt(v);
v = BI.parseInt(v);
// 切换年不受范围限制 // 切换年不受范围限制
// 对于年控件来说,只要传入的minDate和maxDate的year区间包含v就是合法的 // 对于年控件来说,只要传入的minDate和maxDate的year区间包含v就是合法的
// var startDate = BI.parseDateTime(o.min, "%Y-%X-%d"); // var startDate = parseDateTime(o.min, "%Y-%X-%d");
// var endDate = BI.parseDateTime(o.max, "%Y-%X-%d"); // var endDate = 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]) { // 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 = BI.getDate().getFullYear(); // v = getDate().getFullYear();
// } // }
this.selectedYear = v; this.selectedYear = v;
this.navigation.setSelect(BI.YearCalendar.getPageByYear(v)); this.navigation.setSelect(YearCalendar.getPageByYear(v));
this.navigation.setValue(v); this.navigation.setValue(v);
} }
}); }
BI.YearPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.year_popup", BI.YearPopup);

69
src/widget/date/calendar/trigger.triangle.date.js

@ -1,66 +1,73 @@
import { shortcut, extend, createWidget } from "@/core";
import { Trigger } from "@/base";
/** /**
* 日期控件中的年份或月份trigger * 日期控件中的年份或月份trigger
* *
* Created by GUY on 2015/9/7. * Created by GUY on 2015/9/7.
* @class BI.DateTriangleTrigger * @class DateTriangleTrigger
* @extends BI.Trigger * @extends Trigger
*/ */
BI.DateTriangleTrigger = BI.inherit(BI.Trigger, { @shortcut()
_const: { export class DateTriangleTrigger extends Trigger {
static xtype = "bi.date_triangle_trigger"
_const = {
height: 24, height: 24,
iconWidth: 12, iconWidth: 12,
iconHeight: 12 iconHeight: 12,
}, };
_defaultConfig: function () { _defaultConfig() {
return BI.extend( BI.DateTriangleTrigger.superclass._defaultConfig.apply(this, arguments), { return extend(super._defaultConfig(...arguments), {
baseCls: "bi-date-triangle-trigger solid-triangle-bottom-font cursor-pointer", baseCls: "bi-date-triangle-trigger solid-triangle-bottom-font cursor-pointer",
height: 24 height: 24,
}); });
}, }
_init: function () {
BI.DateTriangleTrigger.superclass._init.apply(this, arguments); _init() {
var o = this.options, c = this._const; super._init(...arguments);
this.text = BI.createWidget({ const o = this.options,
c = this._const;
this.text = createWidget({
type: "bi.label", type: "bi.label",
cls: "list-item-text", cls: "list-item-text",
textAlign: "right", textAlign: "right",
text: o.text, text: o.text,
value: o.value, value: o.value,
height: c.height height: c.height,
}); });
BI.createWidget({ createWidget({
type: "bi.vertical_adapt", type: "bi.vertical_adapt",
element: this, element: this,
items: [{ items: [{
el: this.text, el: this.text,
rgap: 5 rgap: 5,
}, { }, {
type: "bi.icon_label", type: "bi.icon_label",
width: 16 width: 16,
}] }],
}); });
}, }
setValue: function (v) { setValue(v) {
this.text.setValue(v); this.text.setValue(v);
}, }
getValue: function () { getValue() {
return this.text.getValue(); return this.text.getValue();
}, }
setText: function (v) { setText(v) {
this.text.setText(v); this.text.setText(v);
}, }
getText: function () { getText() {
return this.item.getText(); return this.item.getText();
}, }
getKey: function () { getKey() {
} }
}); }
BI.shortcut("bi.date_triangle_trigger", BI.DateTriangleTrigger);

12
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
};
Loading…
Cancel
Save