From a57b300e6aa1c9253aaffb84aa444b1d2fde60ff Mon Sep 17 00:00:00 2001 From: Alex Iglesias Date: Fri, 28 Oct 2022 23:17:48 +0200 Subject: [PATCH] Created new typeguards/instances utils --- .changeset/long-seahorses-argue.md | 5 +++++ src/helpers/clearFormField.ts | 3 ++- src/helpers/findTextNode.ts | 4 +++- src/helpers/getFormFieldValue.ts | 3 ++- src/helpers/setFormFieldValue.ts | 3 ++- src/type-guards/index.ts | 1 + src/type-guards/instances.ts | 13 +++++++++++++ src/type-guards/isFormField.ts | 3 ++- 8 files changed, 30 insertions(+), 5 deletions(-) create mode 100644 .changeset/long-seahorses-argue.md create mode 100644 src/type-guards/instances.ts diff --git a/.changeset/long-seahorses-argue.md b/.changeset/long-seahorses-argue.md new file mode 100644 index 0000000..834b5b8 --- /dev/null +++ b/.changeset/long-seahorses-argue.md @@ -0,0 +1,5 @@ +--- +'@finsweet/ts-utils': minor +--- + +Created new typeguards/instances utils diff --git a/src/helpers/clearFormField.ts b/src/helpers/clearFormField.ts index 241fb8d..b04fa33 100644 --- a/src/helpers/clearFormField.ts +++ b/src/helpers/clearFormField.ts @@ -2,6 +2,7 @@ import { FORM_CSS_CLASSES } from '../webflow/css'; import { simulateEvent } from './simulateEvent'; import type { FormField } from '../types'; +import { isHTMLInputElement } from '../type-guards'; const { radioInput: radioInputCSSClass, @@ -19,7 +20,7 @@ const { export const clearFormField = (field: FormField, omitEvents: Parameters['1'] = []): void => { const { type } = field; - if (field instanceof HTMLInputElement && ['checkbox', 'radio'].includes(type)) { + if (isHTMLInputElement(field) && ['checkbox', 'radio'].includes(type)) { if (!field.checked) return; // Reset the field's value diff --git a/src/helpers/findTextNode.ts b/src/helpers/findTextNode.ts index dd8a5c9..77c505c 100644 --- a/src/helpers/findTextNode.ts +++ b/src/helpers/findTextNode.ts @@ -1,3 +1,5 @@ +import { isHTMLElement } from '../type-guards'; + /** * Finds the first child text node of an element * @param element The element to search into. @@ -6,7 +8,7 @@ export const findTextNode = (element: HTMLElement): ChildNode | undefined => { let textNode: ChildNode | undefined; for (const node of element.childNodes) { - if (node instanceof HTMLElement && node.childNodes.length) textNode = findTextNode(node); + if (isHTMLElement(node) && node.childNodes.length) textNode = findTextNode(node); else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) textNode = node; if (textNode) break; diff --git a/src/helpers/getFormFieldValue.ts b/src/helpers/getFormFieldValue.ts index 2a9479e..efb00b6 100644 --- a/src/helpers/getFormFieldValue.ts +++ b/src/helpers/getFormFieldValue.ts @@ -1,3 +1,4 @@ +import { isHTMLInputElement } from '../type-guards'; import type { FormField } from '../types/FormField'; /** @@ -14,7 +15,7 @@ export const getFormFieldValue = (input: FormField): string => { const checkedOption = input.closest('form')?.querySelector(`input[name="${input.name}"]:checked`); // If exists, set its value - value = checkedOption instanceof HTMLInputElement ? checkedOption.value : ''; + value = isHTMLInputElement(checkedOption) ? checkedOption.value : ''; } return value.toString(); diff --git a/src/helpers/setFormFieldValue.ts b/src/helpers/setFormFieldValue.ts index 01d488b..52b12d5 100644 --- a/src/helpers/setFormFieldValue.ts +++ b/src/helpers/setFormFieldValue.ts @@ -1,6 +1,7 @@ import { simulateEvent } from '.'; import type { FormField } from '..'; +import { isHTMLInputElement } from '..'; /** * Sets a value to a FormField element and emits `click`, `input` and `change` Events. @@ -16,7 +17,7 @@ export const setFormFieldValue = (element: FormField, value: string | boolean): if (isRadio || isCheckbox) { if ( - !(element instanceof HTMLInputElement) || + !isHTMLInputElement(element) || typeof value !== 'boolean' || value === element.checked || (isRadio && value === false) diff --git a/src/type-guards/index.ts b/src/type-guards/index.ts index 17d68c3..6c66a31 100644 --- a/src/type-guards/index.ts +++ b/src/type-guards/index.ts @@ -1,3 +1,4 @@ +export * from './instances'; export { isFormField } from './isFormField'; export { isKeyOf } from './isKeyOf'; export { isNotEmpty } from './isNotEmpty'; diff --git a/src/type-guards/instances.ts b/src/type-guards/instances.ts new file mode 100644 index 0000000..feec5ee --- /dev/null +++ b/src/type-guards/instances.ts @@ -0,0 +1,13 @@ +export const isNode = (target: unknown): target is Node => target instanceof Node; + +export const isElement = (target: unknown): target is Element => target instanceof Element; + +export const isHTMLElement = (target: unknown): target is HTMLElement => target instanceof HTMLElement; + +export const isHTMLInputElement = (target: unknown): target is HTMLInputElement => target instanceof HTMLInputElement; + +export const isHTMLSelectElement = (target: unknown): target is HTMLSelectElement => + target instanceof HTMLSelectElement; + +export const isHTMLTextAreaElement = (target: unknown): target is HTMLTextAreaElement => + target instanceof HTMLTextAreaElement; diff --git a/src/type-guards/isFormField.ts b/src/type-guards/isFormField.ts index 5fc8a71..5b542e1 100644 --- a/src/type-guards/isFormField.ts +++ b/src/type-guards/isFormField.ts @@ -1,8 +1,9 @@ import type { FormField } from '../types/FormField'; +import { isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement } from './instances'; /** * Checks if an element is a form field element * @param element */ // prettier-ignore -export const isFormField = (element: Element | EventTarget | null): element is FormField => element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement; +export const isFormField = (element: Element | EventTarget | null): element is FormField => isHTMLInputElement(element) || isHTMLSelectElement(element) || isHTMLTextAreaElement(element);