forked from fanruan/fineui
Zhenfei.Li
2 years ago
6 changed files with 493 additions and 490 deletions
@ -1,94 +1,102 @@ |
|||||||
!(function () { |
import { shortcut, Widget, i18nText, CenterAdaptLayout, GridLayout, isNull, isEmptyObject, isEmptyString } from "@/core"; |
||||||
BI.TimePopup = BI.inherit(BI.Widget, { |
import { TextButton } from "@/base"; |
||||||
props: { |
import { DynamicDateTimeSelect } from "../dynamicdatetime"; |
||||||
baseCls: "bi-date-time-popup", |
|
||||||
height: 68 |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
var self = this, o = this.options; |
|
||||||
|
|
||||||
return { |
@shortcut() |
||||||
type: "bi.vtape", |
export class TimePopup extends Widget { |
||||||
items: [{ |
static xtype = "bi.time_popup" |
||||||
el: { |
|
||||||
type: "bi.center_adapt", |
props = { |
||||||
cls: "bi-split-top", |
baseCls: "bi-date-time-popup", |
||||||
items: [{ |
height: 68, |
||||||
type: "bi.dynamic_date_time_select", |
}; |
||||||
value: o.value, |
|
||||||
ref: function (_ref) { |
static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE" |
||||||
self.timeSelect = _ref; |
static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE" |
||||||
} |
static BUTTON_NOW_EVENT_CHANGE = "BUTTON_NOW_EVENT_CHANGE" |
||||||
}] |
static CALENDAR_EVENT_CHANGE = "CALENDAR_EVENT_CHANGE" |
||||||
}, |
|
||||||
hgap: 10, |
render() { |
||||||
height: 44 |
const o = this.options; |
||||||
}, { |
|
||||||
el: { |
return { |
||||||
type: "bi.grid", |
type: "bi.vtape", |
||||||
items: [[{ |
items: [{ |
||||||
type: "bi.text_button", |
el: { |
||||||
|
type: CenterAdaptLayout.xtype, |
||||||
|
cls: "bi-split-top", |
||||||
|
items: [{ |
||||||
|
type: DynamicDateTimeSelect.xtype, |
||||||
|
value: o.value, |
||||||
|
ref: _ref => { |
||||||
|
this.timeSelect = _ref; |
||||||
|
}, |
||||||
|
}], |
||||||
|
}, |
||||||
|
hgap: 10, |
||||||
|
height: 44, |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: GridLayout.xtype, |
||||||
|
items: [ |
||||||
|
[{ |
||||||
|
type: TextButton.xtype, |
||||||
cls: "bi-high-light bi-split-top", |
cls: "bi-high-light bi-split-top", |
||||||
shadow: true, |
shadow: true, |
||||||
text: BI.i18nText("BI-Basic_Clears"), |
text: i18nText("BI-Basic_Clears"), |
||||||
listeners: [{ |
listeners: [{ |
||||||
eventName: BI.TextButton.EVENT_CHANGE, |
eventName: TextButton.EVENT_CHANGE, |
||||||
action: function () { |
action: () => { |
||||||
self.fireEvent(BI.TimePopup.BUTTON_CLEAR_EVENT_CHANGE); |
this.fireEvent(TimePopup.BUTTON_CLEAR_EVENT_CHANGE); |
||||||
} |
}, |
||||||
}] |
}], |
||||||
}, { |
}, { |
||||||
type: "bi.text_button", |
type: TextButton.xtype, |
||||||
cls: "bi-split-left bi-split-right bi-high-light bi-split-top", |
cls: "bi-split-left bi-split-right bi-high-light bi-split-top", |
||||||
shadow: true, |
shadow: true, |
||||||
text: BI.i18nText("BI-Basic_Now"), |
text: i18nText("BI-Basic_Now"), |
||||||
listeners: [{ |
listeners: [{ |
||||||
eventName: BI.TextButton.EVENT_CHANGE, |
eventName: TextButton.EVENT_CHANGE, |
||||||
action: function () { |
action: () => { |
||||||
self.fireEvent(BI.TimePopup.BUTTON_NOW_EVENT_CHANGE); |
this.fireEvent(TimePopup.BUTTON_NOW_EVENT_CHANGE); |
||||||
} |
}, |
||||||
}] |
}], |
||||||
}, { |
}, { |
||||||
type: "bi.text_button", |
type: TextButton.xtype, |
||||||
cls: "bi-high-light bi-split-top", |
cls: "bi-high-light bi-split-top", |
||||||
shadow: true, |
shadow: true, |
||||||
text: BI.i18nText("BI-Basic_OK"), |
text: i18nText("BI-Basic_OK"), |
||||||
listeners: [{ |
listeners: [{ |
||||||
eventName: BI.TextButton.EVENT_CHANGE, |
eventName: TextButton.EVENT_CHANGE, |
||||||
action: function () { |
action: () => { |
||||||
self.fireEvent(BI.TimePopup.BUTTON_OK_EVENT_CHANGE); |
this.fireEvent(TimePopup.BUTTON_OK_EVENT_CHANGE); |
||||||
} |
}, |
||||||
}] |
}], |
||||||
}]] |
}] |
||||||
}, |
], |
||||||
height: 24 |
}, |
||||||
}] |
height: 24, |
||||||
}; |
}], |
||||||
}, |
}; |
||||||
|
} |
||||||
|
|
||||||
setValue: function (value) { |
setValue(value) { |
||||||
if (this._checkValueValid(value)) { |
if (this._checkValueValid(value)) { |
||||||
this.timeSelect.setValue(); |
this.timeSelect.setValue(); |
||||||
} else { |
} else { |
||||||
this.timeSelect.setValue({ |
this.timeSelect.setValue({ |
||||||
hour: value.hour, |
hour: value.hour, |
||||||
minute: value.minute, |
minute: value.minute, |
||||||
second: value.second |
second: value.second, |
||||||
}); |
}); |
||||||
} |
} |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.timeSelect.getValue(); |
return this.timeSelect.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
_checkValueValid: function (value) { |
_checkValueValid(value) { |
||||||
return BI.isNull(value) || BI.isEmptyObject(value) || BI.isEmptyString(value); |
return isNull(value) || isEmptyObject(value) || isEmptyString(value); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.TimePopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; |
|
||||||
BI.TimePopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; |
|
||||||
BI.TimePopup.BUTTON_NOW_EVENT_CHANGE = "BUTTON_NOW_EVENT_CHANGE"; |
|
||||||
BI.TimePopup.CALENDAR_EVENT_CHANGE = "CALENDAR_EVENT_CHANGE"; |
|
||||||
BI.shortcut("bi.time_popup", BI.TimePopup); |
|
||||||
})(); |
|
||||||
|
@ -0,0 +1,3 @@ |
|||||||
|
export { TimePopup } from "./datetime.popup"; |
||||||
|
export { TimeCombo } from "./time.combo"; |
||||||
|
export { TimeTrigger } from "./time.trigger"; |
@ -1,247 +1,245 @@ |
|||||||
/** |
import { shortcut, toPix, getDate, isNotEmptyString, isEqual, isEmptyString, AbsoluteLayout } from "@/core"; |
||||||
* 时间选择 |
import { Single, IconButton, Combo } from "@/base"; |
||||||
* qcc |
import { TimePopup } from "./datetime.popup"; |
||||||
* 2019/2/28 |
|
||||||
*/ |
|
||||||
|
|
||||||
!(function () { |
@shortcut() |
||||||
BI.TimeCombo = BI.inherit(BI.Single, { |
export class TimeCombo extends Single { |
||||||
constants: { |
static xtype = "bi.time_combo" |
||||||
popupHeight: 80, |
|
||||||
popupWidth: 240, |
|
||||||
comboAdjustHeight: 1, |
|
||||||
border: 1, |
|
||||||
iconWidth: 24 |
|
||||||
}, |
|
||||||
props: { |
|
||||||
baseCls: "bi-time-combo", |
|
||||||
height: 24, |
|
||||||
format: "", |
|
||||||
allowEdit: false, |
|
||||||
isNeedAdjustHeight: false, |
|
||||||
isNeedAdjustWidth: false |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" |
||||||
var o = this.options; |
static EVENT_CONFIRM = "EVENT_CONFIRM" |
||||||
BI.TimeCombo.superclass._init.apply(this, arguments); |
static EVENT_CHANGE = "EVENT_CHANGE" |
||||||
}, |
static EVENT_VALID = "EVENT_VALID" |
||||||
|
static EVENT_ERROR = "EVENT_ERROR" |
||||||
|
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW" |
||||||
|
|
||||||
render: function () { |
constants = { |
||||||
var self = this, opts = this.options; |
popupHeight: 80, |
||||||
this.storeTriggerValue = ""; |
popupWidth: 240, |
||||||
this.storeValue = opts.value; |
comboAdjustHeight: 1, |
||||||
|
border: 1, |
||||||
|
iconWidth: 24, |
||||||
|
} |
||||||
|
|
||||||
var popup = { |
props = { |
||||||
type: "bi.time_popup", |
baseCls: "bi-time-combo", |
||||||
value: opts.value, |
height: 24, |
||||||
listeners: [{ |
format: "", |
||||||
eventName: BI.TimePopup.BUTTON_CLEAR_EVENT_CHANGE, |
allowEdit: false, |
||||||
action: function () { |
isNeedAdjustHeight: false, |
||||||
self.setValue(); |
isNeedAdjustWidth: false, |
||||||
self.hidePopupView(); |
}; |
||||||
self.fireEvent(BI.TimeCombo.EVENT_CONFIRM); |
|
||||||
} |
_init() { |
||||||
}, { |
super._init(...arguments); |
||||||
eventName: BI.TimePopup.BUTTON_OK_EVENT_CHANGE, |
} |
||||||
action: function () { |
|
||||||
self.setValue(self.popup.getValue()); |
render() { |
||||||
self.hidePopupView(); |
const opts = this.options; |
||||||
self.fireEvent(BI.TimeCombo.EVENT_CONFIRM); |
this.storeTriggerValue = ""; |
||||||
} |
this.storeValue = opts.value; |
||||||
}, { |
|
||||||
eventName: BI.TimePopup.BUTTON_NOW_EVENT_CHANGE, |
const popup = { |
||||||
action: function () { |
type: "bi.time_popup", |
||||||
self._setNowTime(); |
value: opts.value, |
||||||
} |
listeners: [{ |
||||||
}], |
eventName: TimePopup.BUTTON_CLEAR_EVENT_CHANGE, |
||||||
ref: function (_ref) { |
action: () => { |
||||||
self.popup = _ref; |
this.setValue(); |
||||||
} |
this.hidePopupView(); |
||||||
}; |
this.fireEvent(TimeCombo.EVENT_CONFIRM); |
||||||
return { |
}, |
||||||
type: "bi.absolute", |
}, { |
||||||
items: [{ |
eventName: TimePopup.BUTTON_OK_EVENT_CHANGE, |
||||||
|
action: () => { |
||||||
|
this.setValue(this.popup.getValue()); |
||||||
|
this.hidePopupView(); |
||||||
|
this.fireEvent(TimeCombo.EVENT_CONFIRM); |
||||||
|
}, |
||||||
|
}, { |
||||||
|
eventName: TimePopup.BUTTON_NOW_EVENT_CHANGE, |
||||||
|
action: () => { |
||||||
|
this._setNowTime(); |
||||||
|
}, |
||||||
|
}], |
||||||
|
ref: _ref => { |
||||||
|
this.popup = _ref; |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
type: AbsoluteLayout.xtype, |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: Combo.xtype, |
||||||
|
cls: "bi-border bi-border-radius", |
||||||
|
container: opts.container, |
||||||
|
toggle: false, |
||||||
|
isNeedAdjustHeight: opts.isNeedAdjustHeight, |
||||||
|
isNeedAdjustWidth: opts.isNeedAdjustWidth, |
||||||
el: { |
el: { |
||||||
type: "bi.combo", |
type: "bi.horizontal_fill", |
||||||
cls: "bi-border bi-border-radius", |
columnSize: ["fill", this.constants.iconWidth], |
||||||
container: opts.container, |
height: toPix(opts.height, 2), |
||||||
toggle: false, |
items: [{ |
||||||
isNeedAdjustHeight: opts.isNeedAdjustHeight, |
type: "bi.time_trigger", |
||||||
isNeedAdjustWidth: opts.isNeedAdjustWidth, |
height: toPix(opts.height, 2), |
||||||
el: { |
allowEdit: opts.allowEdit, |
||||||
type: "bi.horizontal_fill", |
watermark: opts.watermark, |
||||||
columnSize: ["fill", this.constants.iconWidth], |
format: opts.format, |
||||||
height: BI.toPix(opts.height, 2), |
value: opts.value, |
||||||
items: [{ |
ref: _ref => { |
||||||
type: "bi.time_trigger", |
this.trigger = _ref; |
||||||
height: BI.toPix(opts.height, 2), |
}, |
||||||
allowEdit: opts.allowEdit, |
listeners: [{ |
||||||
watermark: opts.watermark, |
eventName: "EVENT_KEY_DOWN", |
||||||
format: opts.format, |
action: () => { |
||||||
value: opts.value, |
if (this.combo.isViewVisible()) { |
||||||
ref: function (_ref) { |
this.combo.hideView(); |
||||||
self.trigger = _ref; |
|
||||||
}, |
|
||||||
listeners: [{ |
|
||||||
eventName: "EVENT_KEY_DOWN", |
|
||||||
action: function () { |
|
||||||
if (self.combo.isViewVisible()) { |
|
||||||
self.combo.hideView(); |
|
||||||
} |
|
||||||
self.fireEvent(BI.TimeCombo.EVENT_KEY_DOWN, arguments); |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_STOP", |
|
||||||
action: function () { |
|
||||||
if (!self.combo.isViewVisible()) { |
|
||||||
self.combo.showView(); |
|
||||||
} |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_FOCUS", |
|
||||||
action: function () { |
|
||||||
self.storeTriggerValue = self.trigger.getKey(); |
|
||||||
if (!self.combo.isViewVisible()) { |
|
||||||
self.combo.showView(); |
|
||||||
} |
|
||||||
self.fireEvent("EVENT_FOCUS"); |
|
||||||
} |
} |
||||||
}, { |
this.fireEvent(TimeCombo.EVENT_KEY_DOWN, arguments); |
||||||
eventName: "EVENT_BLUR", |
}, |
||||||
action: function () { |
}, { |
||||||
self.fireEvent("EVENT_BLUR"); |
eventName: "EVENT_STOP", |
||||||
} |
action: () => { |
||||||
}, { |
if (!this.combo.isViewVisible()) { |
||||||
eventName: "EVENT_ERROR", |
this.combo.showView(); |
||||||
action: function () { |
|
||||||
var date = BI.getDate(); |
|
||||||
self.storeValue = { |
|
||||||
hour: date.getHours(), |
|
||||||
minute: date.getMinutes(), |
|
||||||
second: date.getSeconds() |
|
||||||
}; |
|
||||||
self.fireEvent("EVENT_ERROR"); |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_VALID", |
|
||||||
action: function () { |
|
||||||
self.fireEvent("EVENT_VALID"); |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_CHANGE", |
|
||||||
action: function () { |
|
||||||
self.fireEvent("EVENT_CHANGE"); |
|
||||||
} |
} |
||||||
}, { |
}, |
||||||
eventName: "EVENT_CONFIRM", |
}, { |
||||||
action: function () { |
eventName: "EVENT_FOCUS", |
||||||
if (self.combo.isViewVisible()) { |
action: () => { |
||||||
return; |
this.storeTriggerValue = this.trigger.getKey(); |
||||||
} |
if (!this.combo.isViewVisible()) { |
||||||
var dateStore = self.storeTriggerValue; |
this.combo.showView(); |
||||||
var dateObj = self.trigger.getKey(); |
|
||||||
if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { |
|
||||||
self.storeValue = self.trigger.getValue(); |
|
||||||
self.setValue(self.trigger.getValue()); |
|
||||||
} else if (BI.isEmptyString(dateObj)) { |
|
||||||
self.storeValue = null; |
|
||||||
self.trigger.setValue(); |
|
||||||
} |
|
||||||
self.fireEvent("EVENT_CONFIRM"); |
|
||||||
} |
} |
||||||
}] |
this.fireEvent("EVENT_FOCUS"); |
||||||
|
}, |
||||||
}, { |
}, { |
||||||
el: { |
eventName: "EVENT_BLUR", |
||||||
type: "bi.icon_button", |
action: () => { |
||||||
cls: "bi-trigger-icon-button time-font", |
this.fireEvent("EVENT_BLUR"); |
||||||
width: this.constants.iconWidth, |
}, |
||||||
listeners: [{ |
}, { |
||||||
eventName: BI.IconButton.EVENT_CHANGE, |
eventName: "EVENT_ERROR", |
||||||
action: function () { |
action: () => { |
||||||
if (self.combo.isViewVisible()) { |
const date = getDate(); |
||||||
// self.combo.hideView();
|
this.storeValue = { |
||||||
} else { |
hour: date.getHours(), |
||||||
self.combo.showView(); |
minute: date.getMinutes(), |
||||||
} |
second: date.getSeconds(), |
||||||
} |
}; |
||||||
}], |
this.fireEvent("EVENT_ERROR"); |
||||||
ref: function (_ref) { |
}, |
||||||
self.triggerBtn = _ref; |
}, { |
||||||
|
eventName: "EVENT_VALID", |
||||||
|
action: () => { |
||||||
|
this.fireEvent("EVENT_VALID"); |
||||||
|
}, |
||||||
|
}, { |
||||||
|
eventName: "EVENT_CHANGE", |
||||||
|
action: () => { |
||||||
|
this.fireEvent("EVENT_CHANGE"); |
||||||
|
}, |
||||||
|
}, { |
||||||
|
eventName: "EVENT_CONFIRM", |
||||||
|
action: () => { |
||||||
|
if (this.combo.isViewVisible()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
const dateStore = this.storeTriggerValue; |
||||||
|
const dateObj = this.trigger.getKey(); |
||||||
|
if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) { |
||||||
|
this.storeValue = this.trigger.getValue(); |
||||||
|
this.setValue(this.trigger.getValue()); |
||||||
|
} else if (isEmptyString(dateObj)) { |
||||||
|
this.storeValue = null; |
||||||
|
this.trigger.setValue(); |
||||||
} |
} |
||||||
|
this.fireEvent("EVENT_CONFIRM"); |
||||||
}, |
}, |
||||||
}], |
}], |
||||||
}, |
}, { |
||||||
adjustLength: this.constants.comboAdjustHeight, |
el: { |
||||||
popup: { |
type: IconButton.xtype, |
||||||
el: popup, |
cls: "bi-trigger-icon-button time-font", |
||||||
width: opts.isNeedAdjustWidth ? opts.width : this.constants.popupWidth, |
width: this.constants.iconWidth, |
||||||
stopPropagation: false |
listeners: [{ |
||||||
}, |
eventName: IconButton.EVENT_CHANGE, |
||||||
hideChecker: function (e) { |
action: () => { |
||||||
return self.triggerBtn.element.find(e.target).length === 0; |
if (this.combo.isViewVisible()) { |
||||||
}, |
// this.combo.hideView();
|
||||||
listeners: [{ |
} else { |
||||||
eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, |
this.combo.showView(); |
||||||
action: function () { |
} |
||||||
self.popup.setValue(self.storeValue); |
}, |
||||||
self.fireEvent(BI.TimeCombo.EVENT_BEFORE_POPUPVIEW); |
}], |
||||||
} |
ref: _ref => { |
||||||
|
this.triggerBtn = _ref; |
||||||
|
}, |
||||||
|
}, |
||||||
}], |
}], |
||||||
ref: function (_ref) { |
|
||||||
self.combo = _ref; |
|
||||||
} |
|
||||||
}, |
}, |
||||||
top: 0, |
adjustLength: this.constants.comboAdjustHeight, |
||||||
left: 0, |
popup: { |
||||||
right: 0, |
el: popup, |
||||||
bottom: 0 |
width: opts.isNeedAdjustWidth ? opts.width : this.constants.popupWidth, |
||||||
}] |
stopPropagation: false, |
||||||
}; |
}, |
||||||
}, |
hideChecker: e => this.triggerBtn.element.find(e.target).length === 0, |
||||||
|
listeners: [{ |
||||||
|
eventName: Combo.EVENT_BEFORE_POPUPVIEW, |
||||||
|
action: () => { |
||||||
|
this.popup.setValue(this.storeValue); |
||||||
|
this.fireEvent(TimeCombo.EVENT_BEFORE_POPUPVIEW); |
||||||
|
}, |
||||||
|
}], |
||||||
|
ref: _ref => { |
||||||
|
this.combo = _ref; |
||||||
|
}, |
||||||
|
}, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
bottom: 0, |
||||||
|
}], |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.storeValue = v; |
this.storeValue = v; |
||||||
this.trigger.setValue(v); |
this.trigger.setValue(v); |
||||||
}, |
} |
||||||
getValue: function () { |
|
||||||
return this.storeValue; |
|
||||||
}, |
|
||||||
|
|
||||||
hidePopupView: function () { |
getValue() { |
||||||
this.combo.hideView(); |
return this.storeValue; |
||||||
}, |
} |
||||||
|
|
||||||
_setNowTime: function () { |
hidePopupView() { |
||||||
var date = BI.getDate(); |
this.combo.hideView(); |
||||||
var nowTome = { |
} |
||||||
hour: date.getHours(), |
|
||||||
minute: date.getMinutes(), |
|
||||||
second: date.getSeconds() |
|
||||||
}; |
|
||||||
this.setValue(nowTome); |
|
||||||
this.hidePopupView(); |
|
||||||
this.fireEvent(BI.TimeCombo.EVENT_CONFIRM); |
|
||||||
}, |
|
||||||
|
|
||||||
focus: function () { |
_setNowTime() { |
||||||
this.trigger.focus(); |
const date = getDate(); |
||||||
}, |
const nowTome = { |
||||||
|
hour: date.getHours(), |
||||||
|
minute: date.getMinutes(), |
||||||
|
second: date.getSeconds(), |
||||||
|
}; |
||||||
|
this.setValue(nowTome); |
||||||
|
this.hidePopupView(); |
||||||
|
this.fireEvent(TimeCombo.EVENT_CONFIRM); |
||||||
|
} |
||||||
|
|
||||||
blur: function () { |
focus() { |
||||||
this.trigger.blur(); |
this.trigger.focus(); |
||||||
}, |
} |
||||||
|
|
||||||
setWaterMark: function (v) { |
blur() { |
||||||
this.trigger.setWaterMark(v); |
this.trigger.blur(); |
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.TimeCombo.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; |
setWaterMark(v) { |
||||||
BI.TimeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; |
this.trigger.setWaterMark(v); |
||||||
BI.TimeCombo.EVENT_CHANGE = "EVENT_CHANGE"; |
} |
||||||
BI.TimeCombo.EVENT_VALID = "EVENT_VALID"; |
} |
||||||
BI.TimeCombo.EVENT_ERROR = "EVENT_ERROR"; |
|
||||||
BI.TimeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; |
|
||||||
BI.shortcut("bi.time_combo", BI.TimeCombo); |
|
||||||
})(); |
|
||||||
|
@ -1,202 +1,193 @@ |
|||||||
!(function () { |
import { shortcut, i18nText, bind, isNotNull, isNotEmptyString, isEqual, AbsoluteLayout, any, print, parseDateTime, isEmptyObject, getDate, isNotEmptyObject } from "@/core"; |
||||||
BI.TimeTrigger = BI.inherit(BI.Trigger, { |
import { Trigger, Text } from "@/base"; |
||||||
|
import { SignEditor } from "@/case"; |
||||||
|
|
||||||
_const: { |
@shortcut() |
||||||
COMPARE_FORMAT: "%H:%M:%S", |
export class TimeTrigger extends Trigger { |
||||||
COMPLETE_COMPARE_FORMAT: "%Y-%M-%d %H:%M:%S %P", |
static xtype = "bi.time_trigger" |
||||||
FORMAT_ARRAY: [ |
|
||||||
"%H:%M:%S", // HH:mm:ss
|
|
||||||
"%I:%M:%S", // hh:mm:ss
|
|
||||||
"%l:%M:%S", // h:mm:ss
|
|
||||||
"%k:%M:%S", // H:mm:ss
|
|
||||||
"%l:%M:%S %p", // h:mm:ss a
|
|
||||||
"%l:%M:%S %P", // h:mm:ss a
|
|
||||||
"%H:%M:%S %p", // HH:mm:ss a
|
|
||||||
"%H:%M:%S %P", // HH:mm:ss a
|
|
||||||
"%l:%M", // h:mm
|
|
||||||
"%k:%M", // H:mm
|
|
||||||
"%I:%M", // hh:mm
|
|
||||||
"%H:%M", // HH:mm
|
|
||||||
"%M:%S" // mm:ss
|
|
||||||
], |
|
||||||
DEFAULT_DATE_STRING: "2000-01-01", |
|
||||||
DEFAULT_HOUR: "00" |
|
||||||
}, |
|
||||||
|
|
||||||
props: () => ({ |
_const = { |
||||||
|
COMPARE_FORMAT: "%H:%M:%S", |
||||||
|
COMPLETE_COMPARE_FORMAT: "%Y-%M-%d %H:%M:%S %P", |
||||||
|
FORMAT_ARRAY: ["%H:%M:%S", "%I:%M:%S", "%l:%M:%S", "%k:%M:%S", "%l:%M:%S %p", "%l:%M:%S %P", "%H:%M:%S %p", "%H:%M:%S %P", "%l:%M", "%k:%M", "%I:%M", "%H:%M", "%M:%S"], |
||||||
|
DEFAULT_DATE_STRING: "2000-01-01", |
||||||
|
DEFAULT_HOUR: "00", |
||||||
|
}; |
||||||
|
|
||||||
|
props() { |
||||||
|
return { |
||||||
extraCls: "bi-time-trigger", |
extraCls: "bi-time-trigger", |
||||||
value: {}, |
value: {}, |
||||||
format: "", |
format: "", |
||||||
allowEdit: false, |
allowEdit: false, |
||||||
watermark: BI.i18nText("BI-Basic_Unrestricted"), |
watermark: i18nText("BI-Basic_Unrestricted"), |
||||||
}), |
}; |
||||||
|
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
this.storeTriggerValue = ""; |
this.storeTriggerValue = ""; |
||||||
this.storeValue = o.value; |
this.storeValue = o.value; |
||||||
return { |
|
||||||
type: "bi.absolute", |
return { |
||||||
items: [{ |
type: AbsoluteLayout.xtype, |
||||||
el: { |
items: [{ |
||||||
type: "bi.sign_editor", |
el: { |
||||||
height: o.height, |
type: SignEditor.xtype, |
||||||
validationChecker: function (v) { |
height: o.height, |
||||||
return self._dateCheck(v); |
validationChecker: v => this._dateCheck(v), |
||||||
|
quitChecker () { |
||||||
|
return false; |
||||||
|
}, |
||||||
|
ref: _ref => { |
||||||
|
this.editor = _ref; |
||||||
|
}, |
||||||
|
value: this._formatValue(o.value), |
||||||
|
hgap: 4, |
||||||
|
allowBlank: true, |
||||||
|
watermark: o.watermark, |
||||||
|
title: bind(this._getTitle, this), |
||||||
|
listeners: [{ |
||||||
|
eventName: "EVENT_KEY_DOWN", |
||||||
|
action: (...args) => { |
||||||
|
this.fireEvent("EVENT_KEY_DOWN", ...args); |
||||||
}, |
}, |
||||||
quitChecker: function () { |
}, { |
||||||
return false; |
eventName: "EVENT_FOCUS", |
||||||
|
action: () => { |
||||||
|
this.storeTriggerValue = this.getKey(); |
||||||
|
this.fireEvent("EVENT_FOCUS"); |
||||||
}, |
}, |
||||||
ref: function (_ref) { |
}, { |
||||||
self.editor = _ref; |
eventName: "EVENT_BLUR", |
||||||
|
action: () => { |
||||||
|
this.fireEvent("EVENT_BLUR"); |
||||||
}, |
}, |
||||||
value: this._formatValue(o.value), |
}, { |
||||||
hgap: 4, |
eventName: "EVENT_STOP", |
||||||
allowBlank: true, |
action: () => { |
||||||
watermark: o.watermark, |
this.fireEvent("EVENT_STOP"); |
||||||
title: BI.bind(this._getTitle, this), |
}, |
||||||
listeners: [{ |
}, { |
||||||
eventName: "EVENT_KEY_DOWN", |
eventName: "EVENT_VALID", |
||||||
action: function () { |
action: () => { |
||||||
self.fireEvent("EVENT_KEY_DOWN", arguments); |
this.fireEvent("EVENT_VALID"); |
||||||
} |
}, |
||||||
}, { |
}, { |
||||||
eventName: "EVENT_FOCUS", |
eventName: "EVENT_ERROR", |
||||||
action: function () { |
action: () => { |
||||||
self.storeTriggerValue = self.getKey(); |
this.fireEvent("EVENT_ERROR"); |
||||||
self.fireEvent("EVENT_FOCUS"); |
}, |
||||||
} |
}, { |
||||||
}, { |
eventName: "EVENT_CONFIRM", |
||||||
eventName: "EVENT_BLUR", |
action: () => { |
||||||
action: function () { |
const value = this.editor.getValue(); |
||||||
self.fireEvent("EVENT_BLUR"); |
if (isNotNull(value)) { |
||||||
} |
this.editor.setState(value); |
||||||
}, { |
|
||||||
eventName: "EVENT_STOP", |
|
||||||
action: function () { |
|
||||||
self.fireEvent("EVENT_STOP"); |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_VALID", |
|
||||||
action: function () { |
|
||||||
self.fireEvent("EVENT_VALID"); |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_ERROR", |
|
||||||
action: function () { |
|
||||||
self.fireEvent("EVENT_ERROR"); |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_CONFIRM", |
|
||||||
action: function () { |
|
||||||
var value = self.editor.getValue(); |
|
||||||
if (BI.isNotNull(value)) { |
|
||||||
self.editor.setState(value); |
|
||||||
} |
|
||||||
if (BI.isNotEmptyString(value) && !BI.isEqual(self.storeTriggerValue, self.getKey())) { |
|
||||||
var date = value.match(/\d+/g); |
|
||||||
self.storeValue = { |
|
||||||
hour: date[0] | 0, |
|
||||||
minute: date[1] | 0, |
|
||||||
second: date[2] | 0 |
|
||||||
}; |
|
||||||
} |
|
||||||
self.fireEvent("EVENT_CONFIRM"); |
|
||||||
} |
|
||||||
}, { |
|
||||||
eventName: "EVENT_START", |
|
||||||
action: function () { |
|
||||||
self.fireEvent("EVENT_START"); |
|
||||||
} |
} |
||||||
}, { |
if (isNotEmptyString(value) && !isEqual(this.storeTriggerValue, this.getKey())) { |
||||||
eventName: "EVENT_CHANGE", |
const date = value.match(/\d+/g); |
||||||
action: function () { |
this.storeValue = { |
||||||
self.fireEvent("EVENT_CHANGE"); |
hour: date[0] | 0, |
||||||
|
minute: date[1] | 0, |
||||||
|
second: date[2] | 0, |
||||||
|
}; |
||||||
} |
} |
||||||
}] |
this.fireEvent("EVENT_CONFIRM"); |
||||||
}, |
}, |
||||||
left: 0, |
}, { |
||||||
right: 0, |
eventName: "EVENT_START", |
||||||
top: 0, |
action: () => { |
||||||
bottom: 0 |
this.fireEvent("EVENT_START"); |
||||||
}, { |
}, |
||||||
el: { |
}, { |
||||||
type: "bi.text", |
eventName: "EVENT_CHANGE", |
||||||
invisible: o.allowEdit, |
action: () => { |
||||||
cls: "show-text", |
this.fireEvent("EVENT_CHANGE"); |
||||||
title: BI.bind(this._getTitle, this), |
}, |
||||||
hgap: 4 |
}], |
||||||
}, |
}, |
||||||
left: 0, |
left: 0, |
||||||
right: 0, |
right: 0, |
||||||
top: 0, |
top: 0, |
||||||
bottom: 0 |
bottom: 0, |
||||||
}] |
}, { |
||||||
}; |
el: { |
||||||
}, |
type: Text.xtype, |
||||||
|
invisible: o.allowEdit, |
||||||
|
cls: "show-text", |
||||||
|
title: bind(this._getTitle, this), |
||||||
|
hgap: 4, |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0, |
||||||
|
}], |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
_dateCheck: function (date) { |
_dateCheck(date) { |
||||||
var c = this._const; |
const c = this._const; |
||||||
var self = this; |
|
||||||
return BI.any(c.FORMAT_ARRAY, function (idx, format) { |
return any(c.FORMAT_ARRAY, (idx, format) => print(parseDateTime(`${c.DEFAULT_DATE_STRING} ${this._getCompleteHMS(date, format)}`, c.COMPLETE_COMPARE_FORMAT), format) === date); |
||||||
return BI.print(BI.parseDateTime(c.DEFAULT_DATE_STRING + " " + self._getCompleteHMS(date, format), c.COMPLETE_COMPARE_FORMAT), format) === date; |
} |
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_getCompleteHMS: function (str, format) { |
_getCompleteHMS(str, format) { |
||||||
var c = this._const; |
const c = this._const; |
||||||
switch (format) { |
switch (format) { |
||||||
case "%M:%S": |
case "%M:%S": |
||||||
str = c.DEFAULT_HOUR + ":" + str; |
str = `${c.DEFAULT_HOUR}:${str}`; |
||||||
break; |
break; |
||||||
default: |
default: |
||||||
break; |
break; |
||||||
} |
} |
||||||
return str; |
|
||||||
}, |
return str; |
||||||
|
} |
||||||
|
|
||||||
_getTitle: function () { |
_getTitle() { |
||||||
var storeValue = this.storeValue || {}; |
const storeValue = this.storeValue || {}; |
||||||
if (BI.isEmptyObject(storeValue)) { |
if (isEmptyObject(storeValue)) { |
||||||
return this.options.watermark; |
return this.options.watermark; |
||||||
} |
} |
||||||
var date = BI.getDate(); |
const date = getDate(); |
||||||
return BI.print(BI.getDate(date.getFullYear(), 0, 1, storeValue.hour, storeValue.minute, storeValue.second), this._getFormatString()); |
|
||||||
}, |
return print(getDate(date.getFullYear(), 0, 1, storeValue.hour, storeValue.minute, storeValue.second), this._getFormatString()); |
||||||
|
} |
||||||
|
|
||||||
_getFormatString: function () { |
_getFormatString() { |
||||||
return this.options.format || this._const.COMPARE_FORMAT; |
return this.options.format || this._const.COMPARE_FORMAT; |
||||||
}, |
} |
||||||
|
|
||||||
_formatValue: function (v) { |
_formatValue(v) { |
||||||
var now = BI.getDate(); |
const now = getDate(); |
||||||
return BI.isNotEmptyObject(v) ? BI.print(BI.getDate(now.getFullYear(), now.getMonth(), now.getDay(), v.hour, v.minute, v.second), this._getFormatString()) : ""; |
|
||||||
}, |
return isNotEmptyObject(v) ? print(getDate(now.getFullYear(), now.getMonth(), now.getDay(), v.hour, v.minute, v.second), this._getFormatString()) : ""; |
||||||
|
} |
||||||
|
|
||||||
getKey: function () { |
getKey() { |
||||||
return this.editor.getValue(); |
return this.editor.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.storeValue = v; |
this.storeValue = v; |
||||||
this.editor.setValue(this._formatValue(v)); |
this.editor.setValue(this._formatValue(v)); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.storeValue; |
return this.storeValue; |
||||||
}, |
} |
||||||
|
|
||||||
focus: function () { |
focus() { |
||||||
this.editor.focus(); |
this.editor.focus(); |
||||||
}, |
} |
||||||
|
|
||||||
blur: function () { |
blur() { |
||||||
this.editor.blur(); |
this.editor.blur(); |
||||||
}, |
} |
||||||
|
|
||||||
setWaterMark: function (v) { |
setWaterMark(v) { |
||||||
this.editor.setWaterMark(v); |
this.editor.setWaterMark(v); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.time_trigger", BI.TimeTrigger); |
|
||||||
})(); |
|
||||||
|
Loading…
Reference in new issue