fineui/src/base/single/editor/editor.textarea.js

/**
 *
 * Created by GUY on 2016/1/18.
 * @class BI.TextAreaEditor
 * @extends BI.Single
 */
import { shortcut, Widget, Controller, createWidget, extend, isEmptyString, isKey, isNotEmptyString, isNotNull, trim, isFunction } from "../../../core";
import { Single } from "../0.single";
import { Bubbles } from "../../0.base";

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

    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_BLUR = "EVENT_BLUR";
    static EVENT_FOCUS = "EVENT_FOCUS";
    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_EMPTY = "EVENT_EMPTY";
    static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";

    _defaultConfig(conf) {
        return extend(super._defaultConfig(), {
            baseCls: "bi-textarea-editor",
            value: "",
            errorText: "",
            adjustYOffset: conf.simple ? 0 : 2,
            adjustXOffset: 0,
            offsetStyle: "left",
            validationChecker: () => {
                return true;
            },
            scrolly: true,
        });
    }

    render() {
        const { scrolly, value, style } = this.options;
        this.content = createWidget({
            type: "bi.layout",
            tagName: "textarea",
            width: "100%",
            height: "100%",
            cls: "bi-textarea textarea-editor-content display-block",
            css: scrolly ? null : {
                overflowY: "hidden",
            },
        });
        this.content.element.css({ resize: "none" });
        createWidget({
            type: "bi.absolute",
            element: this,
            items: [{
                el: {
                    type: "bi.adaptive",
                    items: [this.content],
                },
                left: 4,
                right: 4,
                top: 2,
                bottom: 2,
            }],
        });

        this.content.element.on("input propertychange", (e) => {
            this._checkError();
            this._checkWaterMark();
            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this);
            this.fireEvent(TextAreaEditor.EVENT_CHANGE);
            if (isEmptyString(this.getValue())) {
                this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
            }
        });

        this.content.element.focus(() => {
            this._checkError();
            this._focus();
            this.fireEvent(TextAreaEditor.EVENT_FOCUS);
            Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), (e) => {
                if (BI.DOM.isExist(this) && !this.element.__isMouseInBounds__(e)) {
                    Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName());
                    this.content.element.blur();
                }
            });
        });
        this.content.element.blur(() => {
            this._setErrorVisible(false);
            this._blur();
            if (!this._isError()) {
                this.fireEvent(TextAreaEditor.EVENT_CONFIRM);
            }
            this.fireEvent(TextAreaEditor.EVENT_BLUR);
            Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName());
        });
        this.content.element.keydown(() => {
            // 水印快速消失
            this._checkWaterMark();
        });
        this.content.element.keyup((e) => {
            this.fireEvent(TextAreaEditor.EVENT_KEY_DOWN, e.keyCode);
        });
        this.content.element.click((e) => {
            e.stopPropagation();
        });
        if (isKey(value)) {
            this.setValue(value);
        }
        if (isNotNull(style)) {
            this.setStyle(style);
        }
        this._checkWaterMark();
    }

    _checkWaterMark() {
        const { watermark, scrolly, invalid, disabled, height } = this.options;
        const val = this.getValue();
        if (isNotEmptyString(val)) {
            this.watermark && this.watermark.destroy();
            this.watermark = null;
        } else {
            if (isNotEmptyString(watermark)) {
                if (!this.watermark) {
                    this.watermark = createWidget({
                        type: "bi.label",
                        cls: "bi-water-mark textarea-watermark",
                        textAlign: "left",
                        whiteSpace: scrolly ? "normal" : "nowrap",
                        text: watermark,
                        invalid,
                        disabled,
                        hgap: 6,
                        vgap: height > 24 ? 4 : 2,
                        height: height > 24 ? "" : height,
                    });
                    this.watermark.element.bind({
                        mousedown: (e) => {
                            if (this.isEnabled()) {
                                this.focus();
                            } else {
                                this.blur();
                            }
                            e.stopEvent();
                        },
                        click: (e) => {
                            e.stopPropagation();
                        },
                    });
                    createWidget({
                        type: "bi.absolute",
                        element: this,
                        items: [{
                            el: this.watermark,
                            left: 0,
                            top: 0,
                            right: 0,
                        }],
                    });
                } else {
                    this.watermark.setText(watermark);
                    this.watermark.setValid(!invalid);
                    this.watermark.setEnable(!disabled);
                }
            }
        }
    }

    _isError() {
        return this.isEnabled() && !this.options.validationChecker(this.getValue());
    }

    _checkError() {
        const isError = this._isError();
        this._setErrorVisible(isError);
        this.element[isError ? "addClass" : "removeClass"]("error");
    }

    _focus() {
        this.content.element.addClass("textarea-editor-focus");
        this._checkWaterMark();
        if (isEmptyString(this.getValue())) {
            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
        }
    }

    _blur() {
        this.content.element.removeClass("textarea-editor-focus");
        this._checkWaterMark();
    }

    _setErrorVisible(b) {
        const { errorText, adjustYOffset, adjustXOffset, offsetStyle } = this.options;
        if (isFunction(errorText)) {
            errorText = errorText(trim(this.getValue()));
        }
        if (!this.disabledError && isKey(errorText)) {
            Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
                adjustYOffset,
                adjustXOffset,
                offsetStyle,
            });
        }
    }

    _defaultState() {
        if (isEmptyString(this.getValue())) {
            this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
            this.fireEvent(TextAreaEditor.EVENT_EMPTY);
        }
    }

    focus() {
        this._focus();
        this.content.element.focus();
    }

    blur() {
        this._blur();
        this.content.element.blur();
    }

    getValue() {
        return this.content.element.val();
    }

    setValue(value) {
        this.content.element.val(value);
        this._checkError();
        this._checkWaterMark();
        this._defaultState();
    }

    setStyle(style) {
        this.style = style;
        this.element.css(style);
        this.content.element.css(extend({}, style, {
            color: style.color || BI.DOM.getContrastColor(BI.DOM.isRGBColor(style.backgroundColor) ? BI.DOM.rgb2hex(style.backgroundColor) : style.backgroundColor),
        }));
    }

    getStyle() {
        return this.style;
    }

    setWatermark(v) {
        this.options.watermark = v;
        this._checkWaterMark();
    }

    _setValid(b) {
        super._setValid(arguments);
        // this.content.setValid(b);
        // this.watermark && this.watermark.setValid(b);
    }

    _setEnable(b) {
        super._setEnable(b);
        this.content && (this.content.element[0].disabled = !b);
    }
}