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); } }