web-component-stencil-test
Version:
Stencil Component Starter
519 lines (518 loc) • 16 kB
JavaScript
import { h, Host } from "@stencil/core";
// import { INPUT_TYPES, InputDefinition, MAXLENGTH, REQUIRED, PATTERN } from '../form/constants';
import { INPUT_TYPES } from '../form/constants';
export class Input {
constructor() {
/**
* Name
*/
this.name = "";
/**
* Prefix
*/
this.prefixInput = "";
/**
* Type
*/
this.type = "text";
/**
* Required
*/
this.required = false;
/**
* Read only
*/
this.readonly = false;
/**
* Disabled
*/
this.disabled = false;
/**
* Pattern for validation
*/
this.pattern = null;
/**
* Max Length
*/
this.maxlength = 0;
/**
* Label
*/
this.label = null;
/**
* placeholder
*/
this.placeholder = null;
/**
* Classnames for the <label> element
*/
this.labelClassnames = '';
/**
* Classnames for the <input /> element
*/
this.inputClassnames = '';
/**
* Input id
*/
this.idInput = '';
/**
* Value
*/
this.value = '';
/**
* Error state
*/
this.error = false;
/**
* Error message
*/
this.errorMessage = null;
/**
* current value
*/
this.currentValue = '';
/**
* internal type object
*/
this.inputDefinition = INPUT_TYPES['text'];
// setError = (error = { error: false, errorMessage: null }) => {
// this.error = error;
// this.errorMessage = errorMessage;
// }
this.onChange = (e) => {
this.valueChanged(e);
};
this.onInput = () => {
this.parseValue(this.inputElement.value);
this.valueChanges.emit(this.currentValue);
};
}
watchHandler(newValue) {
this.parseValue(newValue);
}
/**
* Get the current value of the input. To get a live value of the input, use element.addEventListener('input', () => element.getValue());
*/
async getValue() {
return this.currentValue;
}
/**
* Test validation of the current input value.
*/
async isValid() {
let isValid = true;
// Should be validated?
const shouldBeValidated = this.shouldBeValidated();
if (!shouldBeValidated)
return true;
isValid = isValid && this.validateRequired();
isValid = isValid && this.validateMaxLength();
isValid = isValid && this.validatePattern();
return isValid;
}
valueChanged(event) {
// this.parseValue(event.target.value);
this.valueChanges.emit(event.target.value);
}
formatPatternForDOM(pattern) {
if (!pattern)
return null;
return (`` + pattern)
.replace('/^', '')
.replace('$/', '')
.replace('/', '//');
}
/* Validation */
shouldBeValidated() {
const required = this.required;
const maxlength = this.maxlength;
const readonly = this.readonly;
const disabled = this.disabled;
const pattern = this.pattern;
return !readonly && !disabled && (pattern !== null || required || maxlength > 0);
}
validateRequired() {
const value = this.inputElement.value;
const required = this.required;
if ((required && typeof value === 'object' && (value === null || Object.keys(value).length === 0)) || (typeof value !== 'object' && required && (!value || !value.length))) {
// this.setError({ error: true, errorMessage: REQUIRED.message });
return false;
}
return true;
}
validateMaxLength() {
const value = this.currentValue;
const maxlength = this.maxlength;
if (maxlength > 0 && value && value.length > maxlength) {
// this.setError({ error: true, errorMessage: MAXLENGTH.message });
return false;
}
return true;
}
validatePattern() {
const value = this.currentValue;
const pattern = this.pattern ? this.pattern : this.inputDefinition.pattern;
if (pattern && value && !new RegExp(pattern).test(value)) {
// this.setError({ error: true, errorMessage: PATTERN.message });
return false;
}
return true;
}
getId() {
let { prefixInput, name, idInput } = this;
if (idInput.length)
return idInput;
return prefixInput + name;
}
getTypeObject() {
let type = Object.values(INPUT_TYPES).filter(input => input.type === this.type)[0];
if (!type)
type = INPUT_TYPES['text'];
return type;
}
parseValue(str) {
this.currentValue = str;
}
componentWillLoad() {
this.parseValue(this.value);
this.inputDefinition = this.getTypeObject();
}
render() {
// props
let { inputDefinition, onInput, onChange, required, label, placeholder, labelClassnames, inputClassnames, name, } = this;
// state
const { error, currentValue } = this;
const id = this.getId();
const pattern = this.pattern ? this.pattern : inputDefinition.pattern;
const type = inputDefinition.inputType;
const patternDOM = this.formatPatternForDOM(pattern);
const maxlength = this.maxlength > 0 ? this.maxlength : null;
return h(Host, null,
label &&
h("label", { class: `label ${labelClassnames}`, htmlFor: id }, label),
h("input", { ref: el => this.inputElement = el, type: type, name: name, id: id, onInput: onInput, onChange: onChange, maxLength: maxlength, pattern: patternDOM, required: required, class: `input ${error ? 'input-error' : ""} ${inputClassnames}`, placeholder: placeholder, value: currentValue }));
}
static get is() { return "hrb-input"; }
static get originalStyleUrls() { return {
"$": ["input.scss"]
}; }
static get styleUrls() { return {
"$": ["input.css"]
}; }
static get properties() { return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name"
},
"attribute": "name",
"reflect": false,
"defaultValue": "\"\""
},
"prefixInput": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Prefix"
},
"attribute": "prefix-input",
"reflect": false,
"defaultValue": "\"\""
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Type"
},
"attribute": "type",
"reflect": false,
"defaultValue": "\"text\""
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Required"
},
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Read only"
},
"attribute": "readonly",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disabled"
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"pattern": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RegExp",
"resolved": "RegExp",
"references": {
"RegExp": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Pattern for validation"
},
"defaultValue": "null"
},
"maxlength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Max Length"
},
"attribute": "maxlength",
"reflect": false,
"defaultValue": "0"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label"
},
"attribute": "label",
"reflect": false,
"defaultValue": "null"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "placeholder"
},
"attribute": "placeholder",
"reflect": false,
"defaultValue": "null"
},
"labelClassnames": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Classnames for the <label> element"
},
"attribute": "label-classnames",
"reflect": false,
"defaultValue": "''"
},
"inputClassnames": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Classnames for the <input /> element"
},
"attribute": "input-classnames",
"reflect": false,
"defaultValue": "''"
},
"idInput": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Input id"
},
"attribute": "id-input",
"reflect": false,
"defaultValue": "''"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value"
},
"attribute": "value",
"reflect": false,
"defaultValue": "''"
}
}; }
static get states() { return {
"error": {},
"errorMessage": {},
"currentValue": {},
"inputDefinition": {}
}; }
static get events() { return [{
"method": "valueChanges",
"name": "valueChanges",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get methods() { return {
"getValue": {
"complexType": {
"signature": "() => Promise<string>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "Get the current value of the input. To get a live value of the input, use element.addEventListener('input', () => element.getValue());",
"tags": []
}
},
"isValid": {
"complexType": {
"signature": "() => Promise<boolean>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Test validation of the current input value.",
"tags": []
}
}
}; }
static get watchers() { return [{
"propName": "value",
"methodName": "watchHandler"
}]; }
}