alan
5 years ago
5 changed files with 199 additions and 54 deletions
@ -0,0 +1,97 @@ |
|||||||
|
import { shortcut } from '@core/core'; |
||||||
|
import { TextEditor, Absolute, Label } from 'ui'; |
||||||
|
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; |
||||||
|
}[], |
||||||
|
} |
||||||
|
|
||||||
|
textEditor: any; |
||||||
|
errorLabel: any; |
||||||
|
private isError; |
||||||
|
private value: string; |
||||||
|
private errorChecker: { |
||||||
|
errorText: string; |
||||||
|
checker: (value: string) => boolean; |
||||||
|
autoFix?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const { width, allowBlank, value, watermark, validationChecker } = this.options; |
||||||
|
this.value = value; |
||||||
|
|
||||||
|
return { |
||||||
|
type: Absolute, |
||||||
|
width, |
||||||
|
height: 20, |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: TextEditor, |
||||||
|
width, |
||||||
|
allowBlank, |
||||||
|
value, |
||||||
|
watermark, |
||||||
|
ref: (_ref: any) => { |
||||||
|
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: Label, |
||||||
|
cls: 'bi-error', |
||||||
|
ref: (_ref: any) => { |
||||||
|
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); |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue