fineui/src/widget/numberinterval/numberinterval.js

import { NumberIntervalSingleEidtor } from "./singleeditor/single.editor";
import {
    HorizontalFillLayout,
    shortcut,
    extend,
    i18nText,
    createWidget,
    toPix,
    isNumeric,
    AbsoluteLayout,
    isEmptyString,
    isNotNull,
    isNull,
    isIE,
    getIEVersion,
} from "@/core";
import { Single, Label, Bubbles } from "@/base";
import { IconCombo } from "@/case";
import { NumberIntervalSingleEidtor } from "./singleeditor/single.editor";

@shortcut()
export class NumberInterval extends Single {
    static xtype = "bi.number_interval";

    constants = {
        typeError: "typeBubble",
        numberError: "numberBubble",
        signalError: "signalBubble",
        editorWidth: 114,
        columns: 5,
        width: 24,
        rows: 1,
        numberErrorCls: "number-error",
        border: 1,
        less: 0,
        less_equal: 1,
        numTip: "",
        adjustYOffset: 2,
    };

    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_VALID = "EVENT_VALID";
    static EVENT_ERROR = "EVENT_ERROR";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            extraCls: `bi-number-interval${isIE() && getIEVersion() < 10 ? " hack" : ""}`,
            height: 24,
            validation: "valid",
            closeMin: true,
            allowBlank: true,
            watermark: i18nText("BI-Basic_Unrestricted"),
        });
    }

    _init() {
        const self = this,
            c = this.constants,
            o = this.options;
        super._init(...arguments);
        this.smallEditor = createWidget({
            type: NumberIntervalSingleEidtor.xtype,
            height: toPix(o.height, o.simple ? 1 : 2),
            watermark: o.watermark,
            allowBlank: o.allowBlank,
            value: o.min,
            level: "warning",
            tipType: "success",
            title() {
                return self.smallEditor && self.smallEditor.getValue();
            },
            quitChecker() {
                return false;
            },
            validationChecker(v) {
                if (!isNumeric(v)) {
                    self.smallEditorBubbleType = c.typeError;

                    return false;
                }

                return true;
            },
            cls: `number-interval-small-editor bi-focus-shadow ${
                o.simple ? "bi-border-bottom" : "bi-border bi-border-corner-left-radius"
            }`,
        });

        this.smallTip = createWidget({
            type: Label.xtype,
            text: o.numTip,
            height: toPix(o.height, o.simple ? 1 : 2),
            invisible: true,
        });
        createWidget({
            type: AbsoluteLayout.xtype,
            element: this.smallEditor,
            items: [
                {
                    el: this.smallTip,
                    top: 0,
                    right: 5,
                },
            ],
        });

        this.bigEditor = createWidget({
            type: NumberIntervalSingleEidtor.xtype,
            height: toPix(o.height, o.simple ? 1 : 2),
            watermark: o.watermark,
            allowBlank: o.allowBlank,
            value: o.max,
            title() {
                return self.bigEditor && self.bigEditor.getValue();
            },
            quitChecker() {
                return false;
            },
            validationChecker(v) {
                if (!isNumeric(v)) {
                    self.bigEditorBubbleType = c.typeError;

                    return false;
                }

                return true;
            },
            cls: `number-interval-big-editor bi-focus-shadow${
                o.simple ? " bi-border-bottom" : " bi-border bi-border-corner-right-radius"
            }`,
        });

        this.bigTip = createWidget({
            type: Label.xtype,
            text: o.numTip,
            height: toPix(o.height, o.simple ? 1 : 2),
            invisible: true,
        });
        createWidget({
            type: AbsoluteLayout.xtype,
            element: this.bigEditor,
            items: [
                {
                    el: this.bigTip,
                    top: 0,
                    right: 5,
                },
            ],
        });
        this.smallCombo = createWidget({
            type: IconCombo.xtype,
            cls: `number-interval-small-combo${
                o.simple ? "" : " bi-border-top bi-border-bottom bi-border-right bi-border-corner-right-radius"
            }`,
            height: toPix(o.height, o.simple ? 0 : 2),
            width: toPix(c.width, c.border),
            items: [
                {
                    text: `(${i18nText("BI-Less_Than")})`,
                    iconCls: "less-font",
                    value: 0,
                },
                {
                    text: `(${i18nText("BI-Less_And_Equal")})`,
                    value: 1,
                    iconCls: "less-equal-font",
                },
            ],
        });
        if (o.closeMin === true) {
            this.smallCombo.setValue(1);
        } else {
            this.smallCombo.setValue(0);
        }
        this.bigCombo = createWidget({
            type: IconCombo.xtype,
            cls: `number-interval-big-combo${
                o.simple ? "" : " bi-border-top bi-border-bottom bi-border-left bi-border-corner-left-radius"
            }`,
            height: toPix(o.height, o.simple ? 0 : 2),
            width: toPix(c.width, c.border),
            items: [
                {
                    text: `(${i18nText("BI-Less_Than")})`,
                    iconCls: "less-font",
                    value: 0,
                },
                {
                    text: `(${i18nText("BI-Less_And_Equal")})`,
                    value: 1,
                    iconCls: "less-equal-font",
                },
            ],
        });
        if (o.closeMax === true) {
            this.bigCombo.setValue(1);
        } else {
            this.bigCombo.setValue(0);
        }
        this.label = createWidget({
            type: Label.xtype,
            text: i18nText("BI-Basic_Value"),
            textHeight: o.height,
            // width: toPix(o.width, o.simple ? 0 : c.border * 2),
            hgap: 5,
            height: o.height,
            level: "warning",
            tipType: "warning",
        });
        this.left = createWidget({
            type: HorizontalFillLayout.xtype,
            columnSize: ["fill", ""],
            items: [
                {
                    el: self.smallEditor,
                },
                {
                    el: self.smallCombo,
                },
            ],
        });
        this.right = createWidget({
            type: HorizontalFillLayout.xtype,
            columnSize: ["", "fill"],
            items: [
                {
                    el: self.bigCombo,
                },
                {
                    el: self.bigEditor,
                    // BI-23883 间距考虑边框
                    // lgap: 1
                },
            ],
        });

        createWidget({
            element: self,
            type: HorizontalFillLayout.xtype,
            columnSize: ["fill", "", "fill"],
            items: [
                {
                    el: self.left,
                },
                {
                    el: self.label,
                },
                {
                    el: self.right,
                },
            ],
        });

        // createWidget({
        //     element: self,
        //     type: HorizontalAutoLayout.xtype,
        //     items: [
        //         self.label
        //     ]
        // });

        // createWidget({
        //     element: self,
        //     type: CenterLayout.xtype,
        //     hgap: 15,
        //     height: o.height,
        //     items: [
        //         {
        //             type: AbsoluteLayout.xtype,
        //             items: [{
        //                 el: self.left,
        //                 left: -15,
        //                 right: 0,
        //                 top: 0,
        //                 bottom: 0
        //             }]
        //         }, {
        //             type: AbsoluteLayout.xtype,
        //             items: [{
        //                 el: self.right,
        //                 left: 0,
        //                 right: -15,
        //                 top: 0,
        //                 bottom: 0
        //             }]
        //         }
        //     ]
        // });

        self._setValidEvent(self.bigEditor, c.bigEditor);
        self._setValidEvent(self.smallEditor, c.smallEditor);
        self._setErrorEvent(self.bigEditor, c.bigEditor);
        self._setErrorEvent(self.smallEditor, c.smallEditor);
        self._setBlurEvent(self.bigEditor);
        self._setBlurEvent(self.smallEditor);
        self._setFocusEvent(self.bigEditor);
        self._setFocusEvent(self.smallEditor);
        self._setComboValueChangedEvent(self.bigCombo);
        self._setComboValueChangedEvent(self.smallCombo);
        self._setEditorValueChangedEvent(self.bigEditor);
        self._setEditorValueChangedEvent(self.smallEditor);

        self._checkValidation();
    }

    _checkValidation() {
        const self = this,
            c = this.constants,
            o = this.options;
        self._setTitle("");
        Bubbles.hide(c.typeError);
        Bubbles.hide(c.numberError);
        Bubbles.hide(c.signalError);
        if (!self.smallEditor.isValid() || !self.bigEditor.isValid()) {
            self.element.removeClass("number-error");
            o.validation = "invalid";

            return c.typeError;
        }
        if (isEmptyString(self.smallEditor.getValue()) || isEmptyString(self.bigEditor.getValue())) {
            self.element.removeClass("number-error");
            o.validation = "valid";

            return "";
        }
        const smallValue = parseFloat(self.smallEditor.getValue()),
            bigValue = parseFloat(self.bigEditor.getValue()),
            bigComboValue = self.bigCombo.getValue(),
            smallComboValue = self.smallCombo.getValue();
        if (bigComboValue[0] === c.less_equal && smallComboValue[0] === c.less_equal) {
            if (smallValue > bigValue) {
                self.element.addClass("number-error");
                o.validation = "invalid";

                return c.numberError;
            }
            self.element.removeClass("number-error");
            o.validation = "valid";

            return "";
        }
        if (smallValue > bigValue) {
            self.element.addClass("number-error");
            o.validation = "invalid";

            return c.numberError;
        } else if (smallValue === bigValue) {
            self.element.addClass("number-error");
            o.validation = "invalid";

            return c.signalError;
        }
        self.element.removeClass("number-error");
        o.validation = "valid";

        return "";
    }

    _setTitle(v) {
        this.label.setTitle(v);
    }

    _setFocusEvent(w) {
        const self = this,
            c = this.constants;
        w.on(NumberIntervalSingleEidtor.EVENT_FOCUS, () => {
            self._setTitle("");
            switch (self._checkValidation()) {
                case c.typeError:
                    Bubbles.show(c.typeError, i18nText("BI-Numerical_Interval_Input_Data"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    break;
                case c.numberError:
                    Bubbles.show(c.numberError, i18nText("BI-Numerical_Interval_Number_Value"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    break;
                case c.signalError:
                    Bubbles.show(c.signalError, i18nText("BI-Numerical_Interval_Signal_Value"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    break;
                default:
                    return;
            }
        });
    }

    _setBlurEvent(w) {
        const c = this.constants,
            self = this;
        w.on(NumberIntervalSingleEidtor.EVENT_BLUR, () => {
            Bubbles.hide(c.typeError);
            Bubbles.hide(c.numberError);
            Bubbles.hide(c.signalError);
            switch (self._checkValidation()) {
                case c.typeError:
                    self._setTitle(i18nText("BI-Numerical_Interval_Input_Data"));
                    break;
                case c.numberError:
                    self._setTitle(i18nText("BI-Numerical_Interval_Number_Value"));
                    break;
                case c.signalError:
                    self._setTitle(i18nText("BI-Numerical_Interval_Signal_Value"));
                    break;
                default:
                    self._setTitle("");
            }
        });
    }

    _setErrorEvent(w) {
        const c = this.constants,
            self = this;
        w.on(NumberIntervalSingleEidtor.EVENT_ERROR, () => {
            self._checkValidation();
            Bubbles.show(c.typeError, i18nText("BI-Numerical_Interval_Input_Data"), self, {
                offsetStyle: "left",
                adjustYOffset: c.adjustYOffset,
            });
            self.fireEvent(NumberInterval.EVENT_ERROR);
        });
    }

    _setValidEvent(w) {
        const self = this,
            c = this.constants;
        w.on(NumberIntervalSingleEidtor.EVENT_VALID, () => {
            switch (self._checkValidation()) {
                case c.numberError:
                    Bubbles.show(c.numberError, i18nText("BI-Numerical_Interval_Number_Value"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    self.fireEvent(NumberInterval.EVENT_ERROR);
                    break;
                case c.signalError:
                    Bubbles.show(c.signalError, i18nText("BI-Numerical_Interval_Signal_Value"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    self.fireEvent(NumberInterval.EVENT_ERROR);
                    break;
                default:
                    self.fireEvent(NumberInterval.EVENT_VALID);
            }
        });
    }

    _setEditorValueChangedEvent(w) {
        const self = this,
            c = this.constants;
        w.on(NumberIntervalSingleEidtor.EVENT_CHANGE, () => {
            switch (self._checkValidation()) {
                case c.typeError:
                    Bubbles.show(c.typeError, i18nText("BI-Numerical_Interval_Input_Data"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    break;
                case c.numberError:
                    Bubbles.show(c.numberError, i18nText("BI-Numerical_Interval_Number_Value"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    break;
                case c.signalError:
                    Bubbles.show(c.signalError, i18nText("BI-Numerical_Interval_Signal_Value"), self, {
                        offsetStyle: "left",
                        adjustYOffset: c.adjustYOffset,
                    });
                    break;
                default:
                    break;
            }
            self.fireEvent(NumberInterval.EVENT_CHANGE);
        });
        w.on(NumberIntervalSingleEidtor.EVENT_CONFIRM, () => {
            self.fireEvent(NumberInterval.EVENT_CONFIRM);
        });
    }

    _setComboValueChangedEvent(w) {
        const self = this,
            c = this.constants;
        w.on(IconCombo.EVENT_CHANGE, () => {
            switch (self._checkValidation()) {
                case c.typeError:
                    self._setTitle(i18nText("BI-Numerical_Interval_Input_Data"));
                    self.fireEvent(NumberInterval.EVENT_ERROR);
                    break;
                case c.numberError:
                    self._setTitle(i18nText("BI-Numerical_Interval_Number_Value"));
                    self.fireEvent(NumberInterval.EVENT_ERROR);
                    break;
                case c.signalError:
                    self._setTitle(i18nText("BI-Numerical_Interval_Signal_Value"));
                    self.fireEvent(NumberInterval.EVENT_ERROR);
                    break;
                default:
                    self.fireEvent(NumberInterval.EVENT_CHANGE);
                    self.fireEvent(NumberInterval.EVENT_CONFIRM);
                    self.fireEvent(NumberInterval.EVENT_VALID);
            }
        });
    }

    isStateValid() {
        return this.options.validation === "valid";
    }

    setMinEnable(b) {
        this.smallEditor.setEnable(b);
    }

    setCloseMinEnable(b) {
        this.smallCombo.setEnable(b);
    }

    setMaxEnable(b) {
        this.bigEditor.setEnable(b);
    }

    setCloseMaxEnable(b) {
        this.bigCombo.setEnable(b);
    }

    showNumTip() {
        this.smallTip.setVisible(true);
        this.bigTip.setVisible(true);
    }

    hideNumTip() {
        this.smallTip.setVisible(false);
        this.bigTip.setVisible(false);
    }

    setNumTip(numTip) {
        this.smallTip.setText(numTip);
        this.bigTip.setText(numTip);
    }

    getNumTip() {
        return this.smallTip.getText();
    }

    setValue(data) {
        data = data || {};
        const self = this;
        let combo_value;
        if (isNumeric(data.min) || isEmptyString(data.min)) {
            self.smallEditor.setValue(data.min);
        }

        if (!isNotNull(data.min)) {
            self.smallEditor.setValue("");
        }

        if (isNumeric(data.max) || isEmptyString(data.max)) {
            self.bigEditor.setValue(data.max);
        }

        if (!isNotNull(data.max)) {
            self.bigEditor.setValue("");
        }

        if (!isNull(data.closeMin)) {
            if (data.closeMin === true) {
                combo_value = 1;
            } else {
                combo_value = 0;
            }
            self.smallCombo.setValue(combo_value);
        }

        if (!isNull(data.closeMax)) {
            if (data.closeMax === true) {
                combo_value = 1;
            } else {
                combo_value = 0;
            }
            self.bigCombo.setValue(combo_value);
        }

        this._checkValidation();
    }

    getValue() {
        const self = this,
            value = {},
            minComboValue = self.smallCombo.getValue(),
            maxComboValue = self.bigCombo.getValue();
        value.min = self.smallEditor.getValue();
        value.max = self.bigEditor.getValue();
        if (minComboValue[0] === 0) {
            value.closeMin = false;
        } else {
            value.closeMin = true;
        }

        if (maxComboValue[0] === 0) {
            value.closeMax = false;
        } else {
            value.closeMax = true;
        }

        return value;
    }

    focusMinEditor() {
        this.smallEditor.focus();
    }

    focusMaxEditor() {
        this.bigEditor.focus();
    }

    destroyed() {
        const c = this.constants;
        Bubbles.remove(c.typeError);
        Bubbles.remove(c.numberError);
        Bubbles.remove(c.signalError);
    }
}