fineui/src/widget/time/time.trigger.js

import { shortcut, i18nText, bind, isNotNull, isNotEmptyString, isEqual, AbsoluteLayout, any, print, parseDateTime, isEmptyObject, getDate, isNotEmptyObject } from "@/core";
import { Trigger, Text } from "@/base";
import { SignEditor } from "@/case";

@shortcut()
export class TimeTrigger extends Trigger {
    static xtype = "bi.time_trigger"

    _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",
            value: {},
            format: "",
            allowEdit: false,
            watermark: i18nText("BI-Basic_Unrestricted"),
        };
    }

    render() {
        const o = this.options;
        this.storeTriggerValue = "";
        this.storeValue = o.value;
        
        return {
            type: AbsoluteLayout.xtype,
            items: [{
                el: {
                    type: SignEditor.xtype,
                    height: o.height,
                    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);
                        },
                    }, {
                        eventName: "EVENT_FOCUS",
                        action: () => {
                            this.storeTriggerValue = this.getKey();
                            this.fireEvent("EVENT_FOCUS");
                        },
                    }, {
                        eventName: "EVENT_BLUR",
                        action: () => {
                            this.fireEvent("EVENT_BLUR");
                        },
                    }, {
                        eventName: "EVENT_STOP",
                        action: () => {
                            this.fireEvent("EVENT_STOP");
                        },
                    }, {
                        eventName: "EVENT_VALID",
                        action: () => {
                            this.fireEvent("EVENT_VALID");
                        },
                    }, {
                        eventName: "EVENT_ERROR",
                        action: () => {
                            this.fireEvent("EVENT_ERROR");
                        },
                    }, {
                        eventName: "EVENT_CONFIRM",
                        action: () => {
                            const value = this.editor.getValue();
                            if (isNotNull(value)) {
                                this.editor.setState(value);
                            }
                            if (isNotEmptyString(value) && !isEqual(this.storeTriggerValue, this.getKey())) {
                                const date = value.match(/\d+/g);
                                this.storeValue = {
                                    hour: date[0] | 0,
                                    minute: date[1] | 0,
                                    second: date[2] | 0,
                                };
                            }
                            this.fireEvent("EVENT_CONFIRM");
                        },
                    }, {
                        eventName: "EVENT_START",
                        action: () => {
                            this.fireEvent("EVENT_START");
                        },
                    }, {
                        eventName: "EVENT_CHANGE",
                        action: () => {
                            this.fireEvent("EVENT_CHANGE");
                        },
                    }],
                },
                left: 0,
                right: 0,
                top: 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(date) {
        const c = this._const;
        
        return any(c.FORMAT_ARRAY, (idx, format) => print(parseDateTime(`${c.DEFAULT_DATE_STRING} ${this._getCompleteHMS(date, format)}`, c.COMPLETE_COMPARE_FORMAT), format) === date);
    }

    _getCompleteHMS(str, format) {
        const c = this._const;
        switch (format) {
        case "%M:%S":
            str = `${c.DEFAULT_HOUR}:${str}`;
            break;
        default:
            break;
        }
        
        return str;
    }

    _getTitle() {
        const storeValue = this.storeValue || {};
        if (isEmptyObject(storeValue)) {
            return this.options.watermark;
        }
        const date = getDate();
        
        return print(getDate(date.getFullYear(), 0, 1, storeValue.hour, storeValue.minute, storeValue.second), this._getFormatString());
    }

    _getFormatString() {
        return this.options.format || this._const.COMPARE_FORMAT;
    }

    _formatValue(v) {
        const now = getDate();
        
        return isNotEmptyObject(v) ? print(getDate(now.getFullYear(), now.getMonth(), now.getDay(), v.hour, v.minute, v.second), this._getFormatString()) : "";
    }

    getKey() {
        return this.editor.getValue();
    }

    setValue(v) {
        this.storeValue = v;
        this.editor.setValue(this._formatValue(v));
    }

    getValue() {
        return this.storeValue;
    }

    focus() {
        this.editor.focus();
    }

    blur() {
        this.editor.blur();
    }

    setWaterMark(v) {
        this.editor.setWaterMark(v);
    }
}