decision-webui-dcm/src/modules/components/text_checker/text_checker.ts

import { shortcut } from '@core/core';
import { Label, TextEditor } from '@fui/core';
export const TextCheckerXtype = 'dec.dcm.components.text_checker';
@shortcut(TextCheckerXtype)
export class TextChecker extends BI.Widget {
    props = {
        width: 300,
        allowBlank: true,
        value: '',
        watermark: '',
        validationChecker: [] as {
            errorText: string;
            checker: (value: string) => boolean;
            autoFix?: boolean;
        }[],
        $value: '',
    }

    textEditor: TextEditor;
    errorLabel: Label;
    private isError: boolean;
    private value: string;
    private errorChecker: {
        errorText: string;
        checker: (value: string) => boolean;
        autoFix?: boolean;
    }

    render() {
        const { width, allowBlank, value, watermark, validationChecker, $value } = this.options;
        this.value = value;
        
        return {
            type: BI.AbsoluteLayout.xtype,
            width,
            height: 20,
            items: [{
                el: {
                    type: BI.TextEditor.xtype,
                    $value,
                    width,
                    allowBlank,
                    value,
                    watermark,
                    ref: (_ref: TextEditor) => {
                        this.textEditor = _ref;
                    },
                    listeners: [{
                        eventName: BI.Editor.EVENT_CHANGE,
                        action: () => {
                            const value = this.getValue();
                            if (value) {
                                this.errorChecker = validationChecker.find(item => item.checker && !item.checker(value));
                                this.errorLabel.setText(BI.get(this.errorChecker, 'errorText'));
                                this.isError = !!BI.get(this.errorChecker, 'errorText');
                            } else {
                                this.errorLabel.setText('');
                                this.isError = false;
                            }
                            if (!this.isError) {
                                this.value = value;
                            }
                            this.fireEvent(BI.Editor.EVENT_CHANGE);
                        },
                    }, {
                        eventName: BI.TextEditor.EVENT_BLUR,
                        action: () => {
                            if (BI.get(this.errorChecker, 'autoFix')) {
                                this.setValue(this.value);
                                this.errorLabel.setText('');
                            }
                        },
                    }],
                },
            }, {
                el: {
                    type: BI.Label.xtype,
                    cls: 'bi-error',
                    ref: (_ref: Label) => {
                        this.errorLabel = _ref;
                    },
                },
                top: -15,
            }],
        };
    }

    public getValue(): string {
        return this.textEditor.getValue();
    }

    public setValue(value: string) {
        return this.textEditor.setValue(value);
    }

    public setError(value: string) {
        this.errorLabel.setText(value);
    }
}