-
Notifications
You must be signed in to change notification settings - Fork 33
BZ-42256: feat: Add support for asynchronous validator in input #133
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.
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
base: release
Are you sure you want to change the base?
BZ-42256: feat: Add support for asynchronous validator in input #133
Conversation
99c6c14 to
7acf429
Compare
766850e to
4225408
Compare
6f378af to
5c06656
Compare
src/lib/Input/Input.svelte
Outdated
| $: state = getValidationState(properties) as ValidationState; | ||
| let state: ValidationState = 'InProgress'; | ||
| $: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
avoid adding reactive blocks
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
5c06656 to
a837797
Compare
| for (const validator of customValidators) { | ||
| const currentResult = await Promise.resolve(validator(inputValue, validationResult)); | ||
| if (currentResult === 'Invalid') { | ||
| validationResult = 'Invalid'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
once you reach invalid state, you can just return the result. no need to iterate over remaining validators
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
a837797 to
4564494
Compare
src/lib/Input/Input.svelte
Outdated
| // For making this function reactive, prop was passed as param | ||
| function getValidationState(prop: InputProperties): ValidationState { | ||
| const valueValidation: ValidationState = validateInput( | ||
| async function getValidationState(prop: InputProperties): Promise<ValidationState> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
async function getValidationState(prop: InputProperties): Promise<ValidationState> {
const valueValidation: ValidationState = await validateInput(
prop.value,
prop.dataType,
prop.validationPattern,
prop.inProgressPattern,
prop.validators
);
if (
valueValidation === 'InProgress' &&
prop.value.length > 0 &&
inputElement &&
inputElement !== document.activeElement
) {
state = 'Invalid';
} else {
state = valueValidation;
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
$: getValidationState(properties);
- Add support for asynchronous input validator. - Change return type of custom validator for input component.
4564494 to
db203c3
Compare
Dev proof:
https://drive.google.com/file/d/1dEH7HftNeAqsOeqesCC6NrqDU4fseYFf/view?usp=sharing