78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
import Component from '../component';
|
|
import {FORM_TYPES} from '../../consts';
|
|
|
|
class FormControl extends Component {
|
|
constructor (parentNode, {
|
|
label,
|
|
id,
|
|
type = FORM_TYPES.TEXT,
|
|
placeholder = '',
|
|
initValue = '',
|
|
className = '',
|
|
required = false,
|
|
} = {}) {
|
|
super('#form-control', parentNode);
|
|
|
|
this.label = this.mainNode.querySelector('.form-label');
|
|
this.errorText = this.mainNode.querySelector('.form-text');
|
|
this.input = this.createElement({
|
|
tagName: this.getInputTagName(type),
|
|
options: {
|
|
className: `form-control ${className}`,
|
|
},
|
|
args: {
|
|
type: type === FORM_TYPES.PASSWORD ? 'password' : 'text',
|
|
...(required ? {required: ''} : {}),
|
|
}
|
|
});
|
|
this.input.placeholder = placeholder;
|
|
this.input.setAttribute('id', id);
|
|
this.input.value = initValue;
|
|
|
|
this.label.insertAdjacentElement('afterend', this.input);
|
|
this.label.textContent = label;
|
|
this.label.setAttribute('for', id);
|
|
|
|
this.addEventListener(this.input, 'focus', this.clearError);
|
|
this.addEventListener(this.input, 'click', this.clearError);
|
|
this.addEventListener(this.input, 'keydown', this.clearError);
|
|
}
|
|
|
|
disabled = (value) => {
|
|
this.input.disabled = value;
|
|
}
|
|
|
|
getValue = () => {
|
|
return this.input.value;
|
|
}
|
|
|
|
setValue = (value) => {
|
|
this.input.value = value;
|
|
}
|
|
|
|
setError = (errorMessage) => {
|
|
this.errorText.textContent = errorMessage;
|
|
}
|
|
|
|
clearError = () => {
|
|
this.errorText.textContent = '';
|
|
}
|
|
|
|
getInputTagName (type) {
|
|
switch (type) {
|
|
case FORM_TYPES.TEXT:
|
|
case FORM_TYPES.PASSWORD:
|
|
return 'input';
|
|
case FORM_TYPES.SELECT:
|
|
return 'select';
|
|
case FORM_TYPES.TEXTAREA:
|
|
return 'textarea';
|
|
default: {
|
|
throw new Error(`Тип формы ${type} не поддерживается`);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default FormControl;
|