Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding external validators to TextInput #4

Closed
wants to merge 2 commits into from
Closed

Adding external validators to TextInput #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ca9dd1
Add external validator to TextInput
SweetDealer Apr 26, 2024
1893ae6
Move external validation from EditText to TextInput
SweetDealer Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 3 additions & 17 deletions src/EditText/EditText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ export default class EditText extends HTMLElement {
onChangeValue: []
}

/** @type {InputValidator[]} */
#externalValidators = [];

connectedCallback() {
this.innerHTML = this.#htmlTemplate();
this.#children = {
Expand Down Expand Up @@ -49,7 +46,7 @@ export default class EditText extends HTMLElement {

/** @param {InputValidator} validator */
addExternalValidator(validator) {
Copy link
Member

@ctapobep ctapobep Apr 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just "validator", it's not "external"

this.#externalValidators.push(validator);
this.#children.input.addExternalValidator(validator);
}

get value() {
Expand Down Expand Up @@ -102,7 +99,7 @@ export default class EditText extends HTMLElement {
}

#onEnter() {
if (this.#validateWithExternalValidators()) {
if (this.checkValidity()) {
this.#children.popup.close();
this.#updateDisplayTextAndNotifyIfChanged();
}
Expand All @@ -113,23 +110,12 @@ export default class EditText extends HTMLElement {
event.stopPropagation();
if (event.target !== this.#children.popup)
return;
if (this.#validateWithExternalValidators()) {
if (this.checkValidity()) {
this.#children.popup.close();
this.#updateDisplayTextAndNotifyIfChanged();
}
}

#validateWithExternalValidators() {
for (const validator of this.#externalValidators) {
const result = validator.validate(this, this.value);
if (!result.isValid) {
this.#children.input.errorMessage = result.errorMessage;
return false;
}
}
return true;
}

#updateDisplayTextAndNotifyIfChanged() {
if (!this.#isValid){
this.#children.input.value = this.#getValueAttr();
Expand Down
2 changes: 1 addition & 1 deletion src/InputValidator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default class InputValidator {
}

/**
* @param {EditText} inputEl
* @param {EditText|TextInput} inputEl
* @param {*} valueToValidate
* @return {ValidationResult}
*/
Expand Down
24 changes: 22 additions & 2 deletions src/TextInput/TextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export default class TextInput extends HTMLElement {
};
/** @type {string} */
#lastChangedValue;
// @ts-ignore
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why ignore?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because in another case, we need to make an unused import of this component. And if we don’t do this, we get an error

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand. What kind of error?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TS2304: Cannot find name 'InputValidator'

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, you need to put this explanation whenever you add some "ignore".

So the problem is that JS Doc doesn't know what type we're referencing without an import - it doesn't know where this type is coming from. But there seems to be a solution to this problem: https://stackoverflow.com/questions/51982814/reference-definition-from-ts-check-js-file

/** @type {InputValidator} */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be an array

#externalValidators = [];

connectedCallback() {
this.innerHTML = this.#htmlTemplate();
Expand All @@ -42,6 +45,12 @@ export default class TextInput extends HTMLElement {
window.removeEventListener("visibilitychange", this.#onVisibilityChange.bind(this), { capture: true });
}

// @ts-ignore
/** @param {InputValidator} validator */
addExternalValidator(validator) {
this.#externalValidators.push(validator);
}

/**
* Returns trimmed value of the input.
* @returns {string}
Expand All @@ -66,9 +75,20 @@ export default class TextInput extends HTMLElement {
}

checkValidity() {
const isValid = this.#validityState.checkValidity();
if (!this.#validityState.checkValidity()){
this.errorMessage = this.#validityState.errorMessage;
return false;
}
this.errorMessage = this.#validityState.errorMessage;
return isValid;
for (const /**@type {InputValidator} */ validator of this.#externalValidators) {
const result = validator.validate(this, this.value);
if (!result.isValid) {
this.errorMessage = result.errorMessage;
this.focus()
return false;
}
}
return true;
}

get errorMessage() {
Expand Down
Loading