From 2511c94ba662280c1bf3db46da8a70ae91d1b84b Mon Sep 17 00:00:00 2001 From: Vladyslav Zubko <42296182+what1s1ove@users.noreply.github.com> Date: Wed, 13 Dec 2023 18:23:48 +0200 Subject: [PATCH] style: add prefixes to all helpers/enums/constats fp-69 (#121) --- eslint.config.js | 12 +- src/index.js | 2 +- .../banned-control-element-types.constant.js | 10 + .../banned-control-types.constant.js | 10 - src/libs/constants/constants.js | 4 +- ...y-custom-control-element-types.constant.js | 8 + ...-as-array-custom-control-types.constant.js | 8 - ...e.enum.js => control-element-type.enum.js} | 4 +- src/libs/enums/enums.js | 2 +- .../get-form-control-payload.js | 114 ++++----- .../check-has-value-as-array.helper.js | 15 +- ...heck-is-refer-to-another-element.helper.js | 23 ++ .../check-is-refer-to-another-node.helper.js | 24 -- .../get-allowed-elements.helper.js | 61 ----- ...-checkbox-control-element-value.helper.js} | 4 +- .../get-control-element-value.helper.js} | 4 +- ...time-local-control-element-value.helper.js | 9 + .../get-datatime-local-value.helper.js | 9 - .../get-date-value-control-element.helper.js} | 4 +- .../get-email-control-element-value.helper.js | 20 ++ ...-fieldset-control-element-value.helper.js} | 15 +- .../get-file-control-element-value.helper.js | 16 ++ .../get-form-control-elements-payload.js | 69 ++++++ .../get-form-controls-payload.js | 64 ----- .../get-input-email-value.helper.js | 20 -- .../get-input-file-value.helper.js | 16 -- .../get-multi-select-values.helper.js | 9 - ...t-multiselect-control-type-value.helper.js | 9 + ...t-numeric-control-element-value.helper.js} | 4 +- ...get-operational-control-elements.helper.js | 36 +++ .../check-has-control-element-name.helper.js | 11 + ...-is-allowed-control-element-type.helper.js | 17 ++ ...check-is-allowed-control-element.helper.js | 19 ++ .../helpers/helpers.js | 3 + .../helpers/helpers.js | 26 +- ...e-as-array-control-element-name.helper.js} | 4 +- .../get-form-payload/get-form-payload.js | 10 +- tests/get-form-control-payload.test.js | 227 ++++++++++-------- tests/get-form-payload.test.js | 58 ++--- tsconfig.json | 2 +- 40 files changed, 523 insertions(+), 459 deletions(-) create mode 100644 src/libs/constants/banned-control-element-types.constant.js delete mode 100644 src/libs/constants/banned-control-types.constant.js create mode 100644 src/libs/constants/value-as-array-custom-control-element-types.constant.js delete mode 100644 src/libs/constants/value-as-array-custom-control-types.constant.js rename src/libs/enums/{control-type.enum.js => control-element-type.enum.js} (86%) create mode 100644 src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js delete mode 100644 src/packages/get-form-control-payload/helpers/check-is-refer-to-another-node/check-is-refer-to-another-node.helper.js delete mode 100644 src/packages/get-form-control-payload/helpers/get-allowed-elements/get-allowed-elements.helper.js rename src/packages/get-form-control-payload/helpers/{get-checkbox-value/get-checkbox-value.helper.js => get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js} (77%) rename src/packages/get-form-control-payload/helpers/{get-control-value/get-control-value.helper.js => get-control-element-value/get-control-element-value.helper.js} (67%) create mode 100644 src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js delete mode 100644 src/packages/get-form-control-payload/helpers/get-datatime-local-value/get-datatime-local-value.helper.js rename src/packages/get-form-control-payload/helpers/{get-input-date-value/get-input-date-value.helper.js => get-date-control-element-value/get-date-value-control-element.helper.js} (53%) create mode 100644 src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js rename src/packages/get-form-control-payload/helpers/{get-fieldset-value/get-fieldset-value.helper.js => get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js} (67%) create mode 100644 src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.js create mode 100644 src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js delete mode 100644 src/packages/get-form-control-payload/helpers/get-form-controls-payload/get-form-controls-payload.js delete mode 100644 src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js delete mode 100644 src/packages/get-form-control-payload/helpers/get-input-file-value/get-input-file-value.helper.js delete mode 100644 src/packages/get-form-control-payload/helpers/get-multi-select-values/get-multi-select-values.helper.js create mode 100644 src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js rename src/packages/get-form-control-payload/helpers/{get-input-numeric-value/get-input-numeric-value.helper.js => get-numeric-control-element-value/get-numeric-control-element-value.helper.js} (51%) create mode 100644 src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js create mode 100644 src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js create mode 100644 src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js create mode 100644 src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js create mode 100644 src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.js rename src/packages/get-form-control-payload/helpers/{get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.js => normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js} (75%) diff --git a/eslint.config.js b/eslint.config.js index 338061c..44de922 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -165,12 +165,6 @@ const overridesConfigs = [ 'import/no-default-export': ['off'], }, }, - { - files: ['src/libs/enums/control-type.enum.js'], - rules: { - 'perfectionist/sort-objects': ['off'], - }, - }, { files: ['lint-staged.config.js'], rules: { @@ -184,6 +178,12 @@ const overridesConfigs = [ 'sonarjs/cognitive-complexity': ['off'], }, }, + { + files: ['src/libs/enums/control-element-type.enum.js'], + rules: { + 'perfectionist/sort-objects': ['off'], + }, + }, ]; /** @type {import('eslint').Linter.FlatConfig[]} */ diff --git a/src/index.js b/src/index.js index 789f1f0..d08b683 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -export { ControlType } from './libs/enums/enums.js'; +export { ControlElementType } from './libs/enums/enums.js'; export { FormPayloadError } from './libs/exceptions/exceptions.js'; export { getFormControlPayload } from './packages/get-form-control-payload/get-form-control-payload.js'; export { getFormPayload } from './packages/get-form-payload/get-form-payload.js'; diff --git a/src/libs/constants/banned-control-element-types.constant.js b/src/libs/constants/banned-control-element-types.constant.js new file mode 100644 index 0000000..8de0d37 --- /dev/null +++ b/src/libs/constants/banned-control-element-types.constant.js @@ -0,0 +1,10 @@ +import { ControlElementType } from '../enums/enums.js'; + +const BANNED_CONTROL_ELEMENT_TYPES = /** @type {const} */ ([ + ControlElementType.BUTTON, + ControlElementType.RESET, + ControlElementType.SUBMIT, + ControlElementType.IMAGE, +]); + +export { BANNED_CONTROL_ELEMENT_TYPES }; diff --git a/src/libs/constants/banned-control-types.constant.js b/src/libs/constants/banned-control-types.constant.js deleted file mode 100644 index b3cff9b..0000000 --- a/src/libs/constants/banned-control-types.constant.js +++ /dev/null @@ -1,10 +0,0 @@ -import { ControlType } from '../enums/enums.js'; - -const BANNED_CONTROL_TYPES = /** @type {const} */ ([ - ControlType.BUTTON, - ControlType.RESET, - ControlType.SUBMIT, - ControlType.IMAGE, -]); - -export { BANNED_CONTROL_TYPES }; diff --git a/src/libs/constants/constants.js b/src/libs/constants/constants.js index 6b38c3f..fb6c77e 100644 --- a/src/libs/constants/constants.js +++ b/src/libs/constants/constants.js @@ -1,3 +1,3 @@ -export { BANNED_CONTROL_TYPES } from './banned-control-types.constant.js'; -export { VALUE_AS_ARRAY_CUSTOM_CONTROL_TYPES } from './value-as-array-custom-control-types.constant.js'; +export { BANNED_CONTROL_ELEMENT_TYPES } from './banned-control-element-types.constant.js'; +export { VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES } from './value-as-array-custom-control-element-types.constant.js'; export { VALUE_AS_ARRAY_IDENTIFIER } from './value-as-array-identifier.constant.js'; diff --git a/src/libs/constants/value-as-array-custom-control-element-types.constant.js b/src/libs/constants/value-as-array-custom-control-element-types.constant.js new file mode 100644 index 0000000..5b8b48f --- /dev/null +++ b/src/libs/constants/value-as-array-custom-control-element-types.constant.js @@ -0,0 +1,8 @@ +import { ControlElementType } from '../enums/enums.js'; + +const VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES = [ + ControlElementType.CHECKBOX, + ControlElementType.FIELDSET, +]; + +export { VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES }; diff --git a/src/libs/constants/value-as-array-custom-control-types.constant.js b/src/libs/constants/value-as-array-custom-control-types.constant.js deleted file mode 100644 index e1281a9..0000000 --- a/src/libs/constants/value-as-array-custom-control-types.constant.js +++ /dev/null @@ -1,8 +0,0 @@ -import { ControlType } from '../enums/enums.js'; - -const VALUE_AS_ARRAY_CUSTOM_CONTROL_TYPES = [ - ControlType.CHECKBOX, - ControlType.FIELDSET, -]; - -export { VALUE_AS_ARRAY_CUSTOM_CONTROL_TYPES }; diff --git a/src/libs/enums/control-type.enum.js b/src/libs/enums/control-element-type.enum.js similarity index 86% rename from src/libs/enums/control-type.enum.js rename to src/libs/enums/control-element-type.enum.js index dfc600d..450479d 100644 --- a/src/libs/enums/control-type.enum.js +++ b/src/libs/enums/control-element-type.enum.js @@ -1,4 +1,4 @@ -const ControlType = /** @type {const} */ ({ +const ControlElementType = /** @type {const} */ ({ TEXT: 'text', PASSWORD: 'password', SEARCH: 'search', @@ -39,4 +39,4 @@ const ControlType = /** @type {const} */ ({ FIELDSET: 'fieldset', }); -export { ControlType }; +export { ControlElementType }; diff --git a/src/libs/enums/enums.js b/src/libs/enums/enums.js index ccfc438..7a36d56 100644 --- a/src/libs/enums/enums.js +++ b/src/libs/enums/enums.js @@ -1 +1 @@ -export { ControlType } from './control-type.enum.js'; +export { ControlElementType } from './control-element-type.enum.js'; diff --git a/src/packages/get-form-control-payload/get-form-control-payload.js b/src/packages/get-form-control-payload/get-form-control-payload.js index 6725ca3..a87974a 100644 --- a/src/packages/get-form-control-payload/get-form-control-payload.js +++ b/src/packages/get-form-control-payload/get-form-control-payload.js @@ -1,27 +1,27 @@ -import { ControlType } from '../../libs/enums/enums.js'; +import { ControlElementType } from '../../libs/enums/enums.js'; import { FormPayloadError } from '../../libs/exceptions/exceptions.js'; import { - getCheckboxValue, - getDatetimeLocalValue, - getFieldsetValue, - getFormControlValue, - getInputDateValue, - getInputEmailValue, - getInputFileValue, - getInputNumericValue, - getMultiSelectValues, + getCheckboxControlElementValue, + getControlElementValue, + getDateControlElementValue, + getDatetimeLocaControlElementValue, + getEmailControlElementValue, + getFieldsetControlElementValue, + getFileControlElementValue, + getMultiselectControlElementValue, + getNumericControlElementValue, } from './helpers/helpers.js'; /** @typedef {import('../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ /** * @template {unknown} T - * @param {HTMLFormOperationalControlElement} controlNode + * @param {HTMLFormOperationalControlElement} controlElement * @returns {T} * @throws {FormPayloadError} */ -const getFormControlPayload = (controlNode) => { - const hasType = 'type' in controlNode; +const getFormControlPayload = (controlElement) => { + const hasType = 'type' in controlElement; if (!hasType) { throw new FormPayloadError({ @@ -29,90 +29,96 @@ const getFormControlPayload = (controlNode) => { }); } - switch (controlNode.type) { - case ControlType.TEXT: - case ControlType.PASSWORD: - case ControlType.SEARCH: - case ControlType.URL: - case ControlType.TEL: - case ControlType.COLOR: - case ControlType.RADIO: - case ControlType.HIDDEN: - case ControlType.TEXTAREA: - case ControlType.SELECT_ONE: - case ControlType.OUTPUT: { + switch (controlElement.type) { + case ControlElementType.TEXT: + case ControlElementType.PASSWORD: + case ControlElementType.SEARCH: + case ControlElementType.URL: + case ControlElementType.TEL: + case ControlElementType.COLOR: + case ControlElementType.RADIO: + case ControlElementType.HIDDEN: + case ControlElementType.TEXTAREA: + case ControlElementType.SELECT_ONE: + case ControlElementType.OUTPUT: { return /** @type {T} */ ( - getFormControlValue( + getControlElementValue( /** * @type {HTMLInputElement * | HTMLOutputElement * | HTMLTextAreaElement * | HTMLSelectElement} - */ (controlNode), + */ (controlElement), ) ); } - case ControlType.EMAIL: { + case ControlElementType.EMAIL: { return /** @type {T} */ ( - getInputEmailValue( - /** @type {HTMLInputElement} */ (controlNode), + getEmailControlElementValue( + /** @type {HTMLInputElement} */ (controlElement), ) ); } - case ControlType.NUMBER: - case ControlType.RANGE: { + case ControlElementType.NUMBER: + case ControlElementType.RANGE: { return /** @type {T} */ ( - getInputNumericValue( - /** @type {HTMLInputElement} */ (controlNode), + getNumericControlElementValue( + /** @type {HTMLInputElement} */ (controlElement), ) ); } - case ControlType.CHECKBOX: { + case ControlElementType.CHECKBOX: { return /** @type {T} */ ( - getCheckboxValue(/** @type {HTMLInputElement} */ (controlNode)) + getCheckboxControlElementValue( + /** @type {HTMLInputElement} */ (controlElement), + ) ); } - case ControlType.DATE: - case ControlType.TIME: - case ControlType.MONTH: - case ControlType.WEEK: { + case ControlElementType.DATE: + case ControlElementType.TIME: + case ControlElementType.MONTH: + case ControlElementType.WEEK: { return /** @type {T} */ ( - getInputDateValue(/** @type {HTMLInputElement} */ (controlNode)) + getDateControlElementValue( + /** @type {HTMLInputElement} */ (controlElement), + ) ); } - case ControlType.DATETIME_LOCAL: { + case ControlElementType.DATETIME_LOCAL: { return /** @type {T} */ ( - getDatetimeLocalValue( - /** @type {HTMLInputElement} */ (controlNode), + getDatetimeLocaControlElementValue( + /** @type {HTMLInputElement} */ (controlElement), ) ); } - case ControlType.FILE: { + case ControlElementType.FILE: { return /** @type {T} */ ( - getInputFileValue(/** @type {HTMLInputElement} */ (controlNode)) + getFileControlElementValue( + /** @type {HTMLInputElement} */ (controlElement), + ) ); } - case ControlType.SELECT_MULTIPLE: { + case ControlElementType.SELECT_MULTIPLE: { return /** @type {T} */ ( - getMultiSelectValues( - /** @type {HTMLSelectElement} */ (controlNode), + getMultiselectControlElementValue( + /** @type {HTMLSelectElement} */ (controlElement), ) ); } - case ControlType.FIELDSET: { + case ControlElementType.FIELDSET: { return /** @type {T} */ ( - getFieldsetValue( + getFieldsetControlElementValue( getFormControlPayload, - /** @type {HTMLFieldSetElement} */ (controlNode), + /** @type {HTMLFieldSetElement} */ (controlElement), ) ); } } throw new FormPayloadError({ - message: `Unsupported control element type – ${controlNode.type}.`, + message: `Unsupported control element type – ${controlElement.type}.`, }); }; -export { getFormControlsPayload } from './helpers/helpers.js'; +export { getFormControlElementsPayload } from './helpers/helpers.js'; export { getFormControlPayload }; diff --git a/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js b/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js index e570ced..00f2d3e 100644 --- a/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js +++ b/src/packages/get-form-control-payload/helpers/check-has-value-as-array/check-has-value-as-array.helper.js @@ -1,5 +1,5 @@ import { - VALUE_AS_ARRAY_CUSTOM_CONTROL_TYPES, + VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES, VALUE_AS_ARRAY_IDENTIFIER, } from '../../../../libs/constants/constants.js'; @@ -10,12 +10,15 @@ import { * @returns {boolean} */ const checkHasValueAsArray = (element) => { - return ( - element.name.endsWith(VALUE_AS_ARRAY_IDENTIFIER) && - /** @type {readonly string[]} */ ( - VALUE_AS_ARRAY_CUSTOM_CONTROL_TYPES - ).includes(element.type) + const hasValueAsArrayIdentifier = element.name.endsWith( + VALUE_AS_ARRAY_IDENTIFIER, ); + const isValueAsArrayCustomControlElementType = + /** @type {readonly string[]} */ ( + VALUE_AS_ARRAY_CUSTOM_CONTROL_ELEMENT_TYPES + ).includes(element.type); + + return hasValueAsArrayIdentifier && isValueAsArrayCustomControlElementType; }; export { checkHasValueAsArray }; diff --git a/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js b/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js new file mode 100644 index 0000000..bcdd7fc --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js @@ -0,0 +1,23 @@ +/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ + +/** + * @param {HTMLFormOperationalControlElement} currentElement + * @param {HTMLFormOperationalControlElement[]} checkedElements + * @returns {boolean} + */ +const checkIsReferToAnotherElement = (currentElement, checkedElements) => { + return checkedElements.some((checkedElement) => { + const hasElements = + 'elements' in checkedElement && checkedElement.elements.length > 0; + + if (!hasElements) { + return false; + } + + return [...checkedElement.elements].some((element) => + element.contains(currentElement), + ); + }); +}; + +export { checkIsReferToAnotherElement }; diff --git a/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-node/check-is-refer-to-another-node.helper.js b/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-node/check-is-refer-to-another-node.helper.js deleted file mode 100644 index 44ceed1..0000000 --- a/src/packages/get-form-control-payload/helpers/check-is-refer-to-another-node/check-is-refer-to-another-node.helper.js +++ /dev/null @@ -1,24 +0,0 @@ -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ - -/** - * @template {HTMLFormOperationalControlElement} T - * @param {T} currentNode - * @param {T[]} checkNodes - * @returns {boolean} - */ -const checkIsReferToAnotherNode = (currentNode, checkNodes) => { - return checkNodes.some((checkNode) => { - const hasElements = - 'elements' in checkNode && checkNode.elements.length > 0; - - if (!hasElements) { - return false; - } - - return [...checkNode.elements].some((element) => - element.contains(currentNode), - ); - }); -}; - -export { checkIsReferToAnotherNode }; diff --git a/src/packages/get-form-control-payload/helpers/get-allowed-elements/get-allowed-elements.helper.js b/src/packages/get-form-control-payload/helpers/get-allowed-elements/get-allowed-elements.helper.js deleted file mode 100644 index e1cb56c..0000000 --- a/src/packages/get-form-control-payload/helpers/get-allowed-elements/get-allowed-elements.helper.js +++ /dev/null @@ -1,61 +0,0 @@ -import { BANNED_CONTROL_TYPES } from '../../../../libs/constants/constants.js'; -import { bannedElementNameToElementInstance } from '../../../../libs/maps/maps.js'; - -/** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ - -const checkControlFunctionMap = /** @type {const} */ ({ - /** - * @param {HTMLFormControlElement} element - * @returns {boolean} - */ - checkHasControlName(element) { - return Boolean(element.name); - }, - /** - * @param {HTMLFormControlElement} element - * @returns {boolean} - */ - checkIsAllowedControl(element) { - const isBannedType = /** @type {readonly string[]} */ ( - BANNED_CONTROL_TYPES - ).includes(element.type); - - return !isBannedType; - }, - /** - * @param {HTMLFormControlElement} element - * @returns {boolean} - */ - checkIsAllowedElement(element) { - const isSameNode = Object.values( - bannedElementNameToElementInstance, - ).some((node) => { - return element instanceof node; - }); - - return !isSameNode; - }, -}); - -/** - * @param {HTMLFormControlElement[]} elements - * @returns {HTMLFormOperationalControlElement[]} - */ -const getAllowedElements = (elements) => { - return elements.filter( - /** - * @type {( - * element: HTMLFormControlElement, - * ) => element is HTMLFormOperationalControlElement} - */ (element) => { - return Object.values(checkControlFunctionMap).every( - (checkFunction) => { - return checkFunction(element); - }, - ); - }, - ); -}; - -export { getAllowedElements }; diff --git a/src/packages/get-form-control-payload/helpers/get-checkbox-value/get-checkbox-value.helper.js b/src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js similarity index 77% rename from src/packages/get-form-control-payload/helpers/get-checkbox-value/get-checkbox-value.helper.js rename to src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js index 2fb1541..6754c89 100644 --- a/src/packages/get-form-control-payload/helpers/get-checkbox-value/get-checkbox-value.helper.js +++ b/src/packages/get-form-control-payload/helpers/get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js @@ -4,7 +4,7 @@ import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../libs/constants/constants. * @param {HTMLInputElement} element * @returns {boolean | string[]} */ -const getCheckboxValue = (element) => { +const getCheckboxControlElementValue = (element) => { const hasArrayValue = element.name.endsWith(VALUE_AS_ARRAY_IDENTIFIER); if (hasArrayValue) { @@ -14,4 +14,4 @@ const getCheckboxValue = (element) => { return element.checked; }; -export { getCheckboxValue }; +export { getCheckboxControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-control-value/get-control-value.helper.js b/src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.js similarity index 67% rename from src/packages/get-form-control-payload/helpers/get-control-value/get-control-value.helper.js rename to src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.js index 50ec4f9..4574978 100644 --- a/src/packages/get-form-control-payload/helpers/get-control-value/get-control-value.helper.js +++ b/src/packages/get-form-control-payload/helpers/get-control-element-value/get-control-element-value.helper.js @@ -5,8 +5,8 @@ * | HTMLSelectElement} element * @returns {string} */ -const getFormControlValue = (element) => { +const getControlElementValue = (element) => { return element.value; }; -export { getFormControlValue }; +export { getControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js b/src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js new file mode 100644 index 0000000..341b2c4 --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js @@ -0,0 +1,9 @@ +/** + * @param {HTMLInputElement} element + * @returns {Date} + */ +const getDatetimeLocaControlElementValue = (element) => { + return new Date(element.value); +}; + +export { getDatetimeLocaControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-datatime-local-value/get-datatime-local-value.helper.js b/src/packages/get-form-control-payload/helpers/get-datatime-local-value/get-datatime-local-value.helper.js deleted file mode 100644 index 2cbde64..0000000 --- a/src/packages/get-form-control-payload/helpers/get-datatime-local-value/get-datatime-local-value.helper.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @param {HTMLInputElement} element - * @returns {Date} - */ -const getDatetimeLocalValue = (element) => { - return new Date(element.value); -}; - -export { getDatetimeLocalValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-input-date-value/get-input-date-value.helper.js b/src/packages/get-form-control-payload/helpers/get-date-control-element-value/get-date-value-control-element.helper.js similarity index 53% rename from src/packages/get-form-control-payload/helpers/get-input-date-value/get-input-date-value.helper.js rename to src/packages/get-form-control-payload/helpers/get-date-control-element-value/get-date-value-control-element.helper.js index d9a79de..6dbacd9 100644 --- a/src/packages/get-form-control-payload/helpers/get-input-date-value/get-input-date-value.helper.js +++ b/src/packages/get-form-control-payload/helpers/get-date-control-element-value/get-date-value-control-element.helper.js @@ -2,8 +2,8 @@ * @param {HTMLInputElement} element * @returns {Date | null} */ -const getInputDateValue = (element) => { +const getDateControlElementValue = (element) => { return element.valueAsDate; }; -export { getInputDateValue }; +export { getDateControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js b/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js new file mode 100644 index 0000000..193a586 --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-email-control-element-value/get-email-control-element-value.helper.js @@ -0,0 +1,20 @@ +import { getControlElementValue } from '../get-control-element-value/get-control-element-value.helper.js'; + +const EMAIL_SEPARATOR = ','; + +/** + * @param {HTMLInputElement} element + * @returns {string | string[]} + */ +const getEmailControlElementValue = (element) => { + if (element.multiple) { + return element.value + .split(EMAIL_SEPARATOR) + .map((email) => email.trim()) + .filter((email) => email !== ''); + } + + return getControlElementValue(element); +}; + +export { getEmailControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-fieldset-value/get-fieldset-value.helper.js b/src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js similarity index 67% rename from src/packages/get-form-control-payload/helpers/get-fieldset-value/get-fieldset-value.helper.js rename to src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js index defb144..c74e5b9 100644 --- a/src/packages/get-form-control-payload/helpers/get-fieldset-value/get-fieldset-value.helper.js +++ b/src/packages/get-form-control-payload/helpers/get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js @@ -1,5 +1,5 @@ import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../libs/constants/constants.js'; -import { getFormControlsPayload } from '../get-form-controls-payload/get-form-controls-payload.js'; +import { getFormControlElementsPayload } from '../get-form-control-elements-payload/get-form-control-elements-payload.js'; /** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ /** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ @@ -8,14 +8,17 @@ import { getFormControlsPayload } from '../get-form-controls-payload/get-form-co * @template {Record} T * @param {( * element: HTMLFormOperationalControlElement, - * ) => T} getFormControlPayloadCallback + * ) => T} getFormControlElementPayloadCallback * @param {HTMLFieldSetElement} element * @returns {T | [T]} */ -const getFieldsetValue = (getFormControlPayloadCallback, element) => { +const getFieldsetControlElementValue = ( + getFormControlElementPayloadCallback, + element, +) => { const elements = [.../** @type {HTMLFieldSetElement} */ (element).elements]; - const fieldsetValue = getFormControlsPayload( - getFormControlPayloadCallback, + const fieldsetValue = getFormControlElementsPayload( + getFormControlElementPayloadCallback, .../** @type {HTMLFormControlElement[]} */ (elements), ); @@ -24,4 +27,4 @@ const getFieldsetValue = (getFormControlPayloadCallback, element) => { return /** @type {T} */ (hasArrayValue ? [fieldsetValue] : fieldsetValue); }; -export { getFieldsetValue }; +export { getFieldsetControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.js b/src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.js new file mode 100644 index 0000000..ef3c8b9 --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-file-control-element-value/get-file-control-element-value.helper.js @@ -0,0 +1,16 @@ +/** + * @param {HTMLInputElement} element + * @returns {File[] | File | null} + */ +const getFileControlElementValue = (element) => { + const inputFiles = element.files ?? []; + + if (element.multiple) { + return [...inputFiles]; + } + const [file] = inputFiles; + + return file ?? null; +}; + +export { getFileControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js b/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js new file mode 100644 index 0000000..d8d4d8e --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-form-control-elements-payload/get-form-control-elements-payload.js @@ -0,0 +1,69 @@ +import { checkHasValueAsArray } from '../check-has-value-as-array/check-has-value-as-array.helper.js'; +import { checkIsReferToAnotherElement } from '../check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js'; +import { getOperationalControlElements } from '../get-operational-control-elements/get-operational-control-elements.helper.js'; +import { normalizeValueAsArrayControlElementName } from '../normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js'; + +/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ +/** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ + +/** + * @template {Record} T + * @param {( + * element: HTMLFormOperationalControlElement, + * ) => T} getFormControlElementPayloadCallback + * @param {...HTMLFormControlElement} controlElements + * @returns {T} + */ +const getFormControlElementsPayload = ( + getFormControlElementPayloadCallback, + ...controlElements +) => { + const operationalControlElements = + getOperationalControlElements(controlElements); + + const elementsValues = /** @type {T} */ ({}); + + for (const operationalControlElement of operationalControlElements) { + const isReferToAnotherElement = checkIsReferToAnotherElement( + operationalControlElement, + operationalControlElements, + ); + + if (isReferToAnotherElement) { + continue; + } + + const hasValueAsArray = checkHasValueAsArray(operationalControlElement); + + if (hasValueAsArray) { + const key = /** @type {keyof T} */ ( + normalizeValueAsArrayControlElementName( + operationalControlElement, + ) + ); + const value = /** @type {T[keyof T]} */ ([ + .../** @type {unknown[]} */ (elementsValues[key] ?? []), + .../** @type {unknown[]} */ ( + getFormControlElementPayloadCallback( + operationalControlElement, + ) + ), + ]); + + elementsValues[key] = value; + + continue; + } + + const key = /** @type {keyof T} */ (operationalControlElement.name); + const value = /** @type {T[keyof T]} */ ( + getFormControlElementPayloadCallback(operationalControlElement) + ); + + elementsValues[key] = value; + } + + return elementsValues; +}; + +export { getFormControlElementsPayload }; diff --git a/src/packages/get-form-control-payload/helpers/get-form-controls-payload/get-form-controls-payload.js b/src/packages/get-form-control-payload/helpers/get-form-controls-payload/get-form-controls-payload.js deleted file mode 100644 index f979399..0000000 --- a/src/packages/get-form-control-payload/helpers/get-form-controls-payload/get-form-controls-payload.js +++ /dev/null @@ -1,64 +0,0 @@ -import { checkHasValueAsArray } from '../check-has-value-as-array/check-has-value-as-array.helper.js'; -import { checkIsReferToAnotherNode } from '../check-is-refer-to-another-node/check-is-refer-to-another-node.helper.js'; -import { getAllowedElements } from '../get-allowed-elements/get-allowed-elements.helper.js'; -import { getCleanedValueAsArrayControlName } from '../get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.js'; - -/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ -/** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ - -/** - * @template {Record} T - * @param {( - * element: HTMLFormOperationalControlElement, - * ) => T} getFormControlPayloadCallback - * @param {...HTMLFormControlElement} controlElements - * @returns {T} - */ -const getFormControlsPayload = ( - getFormControlPayloadCallback, - ...controlElements -) => { - const allowedElements = getAllowedElements(controlElements); - - const elementsValues = /** @type {T} */ ({}); - - for (const element of allowedElements) { - const isReferToAnotherNode = checkIsReferToAnotherNode( - element, - allowedElements, - ); - - if (isReferToAnotherNode) { - continue; - } - - const hasValueAsArray = checkHasValueAsArray(element); - - if (hasValueAsArray) { - const key = /** @type {keyof T} */ ( - getCleanedValueAsArrayControlName(element) - ); - const value = /** @type {T[keyof T]} */ ([ - .../** @type {unknown[]} */ (elementsValues[key] ?? []), - .../** @type {unknown[]} */ ( - getFormControlPayloadCallback(element) - ), - ]); - - elementsValues[key] = value; - - continue; - } - - const key = /** @type {keyof T} */ (element.name); - const value = /** @type {T[keyof T]} */ ( - getFormControlPayloadCallback(element) - ); - - elementsValues[key] = value; - } - - return elementsValues; -}; - -export { getFormControlsPayload }; diff --git a/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js b/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js deleted file mode 100644 index e2c3fd1..0000000 --- a/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js +++ /dev/null @@ -1,20 +0,0 @@ -import { getFormControlValue } from '../get-control-value/get-control-value.helper.js'; - -const EMAIL_SEPARATOR = ','; - -/** - * @param {HTMLInputElement} inputNode - * @returns {string | string[]} - */ -const getInputEmailValue = (inputNode) => { - if (inputNode.multiple) { - return inputNode.value - .split(EMAIL_SEPARATOR) - .map((email) => email.trim()) - .filter((email) => email !== ''); - } - - return getFormControlValue(inputNode); -}; - -export { getInputEmailValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-input-file-value/get-input-file-value.helper.js b/src/packages/get-form-control-payload/helpers/get-input-file-value/get-input-file-value.helper.js deleted file mode 100644 index 520c80b..0000000 --- a/src/packages/get-form-control-payload/helpers/get-input-file-value/get-input-file-value.helper.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @param {HTMLInputElement} inputNode - * @returns {File[] | File | null} - */ -const getInputFileValue = (inputNode) => { - const inputFiles = inputNode.files ?? []; - - if (inputNode.multiple) { - return [...inputFiles]; - } - const [file] = inputFiles; - - return file ?? null; -}; - -export { getInputFileValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-multi-select-values/get-multi-select-values.helper.js b/src/packages/get-form-control-payload/helpers/get-multi-select-values/get-multi-select-values.helper.js deleted file mode 100644 index ef98c61..0000000 --- a/src/packages/get-form-control-payload/helpers/get-multi-select-values/get-multi-select-values.helper.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @param {HTMLSelectElement} selectNode - * @returns {string[]} - */ -const getMultiSelectValues = (selectNode) => { - return Array.from(selectNode.selectedOptions, (opt) => opt.value); -}; - -export { getMultiSelectValues }; diff --git a/src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js b/src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js new file mode 100644 index 0000000..1fb742b --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js @@ -0,0 +1,9 @@ +/** + * @param {HTMLSelectElement} element + * @returns {string[]} + */ +const getMultiselectControlElementValue = (element) => { + return Array.from(element.selectedOptions, (opt) => opt.value); +}; + +export { getMultiselectControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-input-numeric-value/get-input-numeric-value.helper.js b/src/packages/get-form-control-payload/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.js similarity index 51% rename from src/packages/get-form-control-payload/helpers/get-input-numeric-value/get-input-numeric-value.helper.js rename to src/packages/get-form-control-payload/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.js index f4665f5..f06c009 100644 --- a/src/packages/get-form-control-payload/helpers/get-input-numeric-value/get-input-numeric-value.helper.js +++ b/src/packages/get-form-control-payload/helpers/get-numeric-control-element-value/get-numeric-control-element-value.helper.js @@ -2,8 +2,8 @@ * @param {HTMLInputElement} element * @returns {number} */ -const getInputNumericValue = (element) => { +const getNumericControlElementValue = (element) => { return element.valueAsNumber; }; -export { getInputNumericValue }; +export { getNumericControlElementValue }; diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js new file mode 100644 index 0000000..5bca0e3 --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/get-operational-control-elements.helper.js @@ -0,0 +1,36 @@ +import { + checkHasControlElementName, + checkIsAllowedControlElement, + checkIsAllowedControlElementType, +} from './helpers/helpers.js'; + +/** @typedef {import('../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ +/** @typedef {import('../../../../libs/types/types.js').HTMLFormOperationalControlElement} HTMLFormOperationalControlElement */ + +const OPERATIONAL_CONTROL_ELEMENT_CHECKERS = [ + checkHasControlElementName, + checkIsAllowedControlElement, + checkIsAllowedControlElementType, +]; + +/** + * @param {HTMLFormControlElement[]} elements + * @returns {HTMLFormOperationalControlElement[]} + */ +const getOperationalControlElements = (elements) => { + return elements.filter( + /** + * @type {( + * element: HTMLFormControlElement, + * ) => element is HTMLFormOperationalControlElement} + */ (element) => { + return Object.values(OPERATIONAL_CONTROL_ELEMENT_CHECKERS).every( + (checkFunction) => { + return checkFunction(element); + }, + ); + }, + ); +}; + +export { getOperationalControlElements }; diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js new file mode 100644 index 0000000..a9284a7 --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-has-control-element-name/check-has-control-element-name.helper.js @@ -0,0 +1,11 @@ +/** @typedef {import('../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ + +/** + * @param {HTMLFormControlElement} element + * @returns {boolean} + */ +const checkHasControlElementName = (element) => { + return Boolean(element.name); +}; + +export { checkHasControlElementName }; diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js new file mode 100644 index 0000000..ce6539c --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js @@ -0,0 +1,17 @@ +import { BANNED_CONTROL_ELEMENT_TYPES } from '../../../../../../libs/constants/constants.js'; + +/** @typedef {import('../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ + +/** + * @param {HTMLFormControlElement} element + * @returns {boolean} + */ +const checkIsAllowedControlElementType = (element) => { + const isBannedType = /** @type {readonly string[]} */ ( + BANNED_CONTROL_ELEMENT_TYPES + ).includes(element.type); + + return !isBannedType; +}; + +export { checkIsAllowedControlElementType }; diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js new file mode 100644 index 0000000..aea4cea --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/check-is-allowed-control-element/check-is-allowed-control-element.helper.js @@ -0,0 +1,19 @@ +import { bannedElementNameToElementInstance } from '../../../../../../libs/maps/maps.js'; + +/** @typedef {import('../../../../../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ + +/** + * @param {HTMLFormControlElement} element + * @returns {boolean} + */ +const checkIsAllowedControlElement = (element) => { + const isSameElement = Object.values( + bannedElementNameToElementInstance, + ).some((elementInstance) => { + return element instanceof elementInstance; + }); + + return !isSameElement; +}; + +export { checkIsAllowedControlElement }; diff --git a/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.js b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.js new file mode 100644 index 0000000..22074ec --- /dev/null +++ b/src/packages/get-form-control-payload/helpers/get-operational-control-elements/helpers/helpers.js @@ -0,0 +1,3 @@ +export { checkHasControlElementName } from './check-has-control-element-name/check-has-control-element-name.helper.js'; +export { checkIsAllowedControlElement } from './check-is-allowed-control-element/check-is-allowed-control-element.helper.js'; +export { checkIsAllowedControlElementType } from './check-is-allowed-control-element-type/check-is-allowed-control-element-type.helper.js'; diff --git a/src/packages/get-form-control-payload/helpers/helpers.js b/src/packages/get-form-control-payload/helpers/helpers.js index 810a373..5687702 100644 --- a/src/packages/get-form-control-payload/helpers/helpers.js +++ b/src/packages/get-form-control-payload/helpers/helpers.js @@ -1,14 +1,14 @@ export { checkHasValueAsArray } from './check-has-value-as-array/check-has-value-as-array.helper.js'; -export { checkIsReferToAnotherNode } from './check-is-refer-to-another-node/check-is-refer-to-another-node.helper.js'; -export { getAllowedElements } from './get-allowed-elements/get-allowed-elements.helper.js'; -export { getCheckboxValue } from './get-checkbox-value/get-checkbox-value.helper.js'; -export { getCleanedValueAsArrayControlName } from './get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.js'; -export { getFormControlValue } from './get-control-value/get-control-value.helper.js'; -export { getDatetimeLocalValue } from './get-datatime-local-value/get-datatime-local-value.helper.js'; -export { getFieldsetValue } from './get-fieldset-value/get-fieldset-value.helper.js'; -export { getFormControlsPayload } from './get-form-controls-payload/get-form-controls-payload.js'; -export { getInputDateValue } from './get-input-date-value/get-input-date-value.helper.js'; -export { getInputEmailValue } from './get-input-email-value/get-input-email-value.helper.js'; -export { getInputFileValue } from './get-input-file-value/get-input-file-value.helper.js'; -export { getInputNumericValue } from './get-input-numeric-value/get-input-numeric-value.helper.js'; -export { getMultiSelectValues } from './get-multi-select-values/get-multi-select-values.helper.js'; +export { checkIsReferToAnotherElement } from './check-is-refer-to-another-element/check-is-refer-to-another-element.helper.js'; +export { getCheckboxControlElementValue } from './get-checkbox-control-element-value/get-checkbox-control-element-value.helper.js'; +export { getControlElementValue } from './get-control-element-value/get-control-element-value.helper.js'; +export { getDatetimeLocaControlElementValue } from './get-datatime-local-control-element-value/get-datatime-local-control-element-value.helper.js'; +export { getDateControlElementValue } from './get-date-control-element-value/get-date-value-control-element.helper.js'; +export { getEmailControlElementValue } from './get-email-control-element-value/get-email-control-element-value.helper.js'; +export { getFieldsetControlElementValue } from './get-fieldset-control-element-value/get-fieldset-control-element-value.helper.js'; +export { getFileControlElementValue } from './get-file-control-element-value/get-file-control-element-value.helper.js'; +export { getFormControlElementsPayload } from './get-form-control-elements-payload/get-form-control-elements-payload.js'; +export { getMultiselectControlElementValue } from './get-multiselect-control-type-value/get-multiselect-control-type-value.helper.js'; +export { getNumericControlElementValue } from './get-numeric-control-element-value/get-numeric-control-element-value.helper.js'; +export { getOperationalControlElements } from './get-operational-control-elements/get-operational-control-elements.helper.js'; +export { normalizeValueAsArrayControlElementName } from './normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js'; diff --git a/src/packages/get-form-control-payload/helpers/get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.js b/src/packages/get-form-control-payload/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js similarity index 75% rename from src/packages/get-form-control-payload/helpers/get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.js rename to src/packages/get-form-control-payload/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js index 81e452f..168c807 100644 --- a/src/packages/get-form-control-payload/helpers/get-cleaned-value-as-array-control-name/get-cleaned-value-as-array-control-name.helper.js +++ b/src/packages/get-form-control-payload/helpers/normalize-value-as-array-control-element-name/normalize-value-as-array-control-element-name.helper.js @@ -6,8 +6,8 @@ import { VALUE_AS_ARRAY_IDENTIFIER } from '../../../../libs/constants/constants. * @param {HTMLFormOperationalControlElement} element * @returns {string} */ -const getCleanedValueAsArrayControlName = (element) => { +const normalizeValueAsArrayControlElementName = (element) => { return element.name.replace(VALUE_AS_ARRAY_IDENTIFIER, ''); }; -export { getCleanedValueAsArrayControlName }; +export { normalizeValueAsArrayControlElementName }; diff --git a/src/packages/get-form-payload/get-form-payload.js b/src/packages/get-form-payload/get-form-payload.js index 3534d71..0d3fc0a 100644 --- a/src/packages/get-form-payload/get-form-payload.js +++ b/src/packages/get-form-payload/get-form-payload.js @@ -1,21 +1,21 @@ import { + getFormControlElementsPayload, getFormControlPayload, - getFormControlsPayload, } from '../get-form-control-payload/get-form-control-payload.js'; /** @typedef {import('../../libs/types/types.js').HTMLFormControlElement} HTMLFormControlElement */ /** * @template {Record} T - * @param {HTMLFormElement} formNode + * @param {HTMLFormElement} formElement * @returns {T} */ -const getFormPayload = (formNode) => { +const getFormPayload = (formElement) => { const elements = /** @type {HTMLFormControlElement[]} */ ([ - ...formNode.elements, + ...formElement.elements, ]); - return getFormControlsPayload(getFormControlPayload, ...elements); + return getFormControlElementsPayload(getFormControlPayload, ...elements); }; export { getFormPayload }; diff --git a/tests/get-form-control-payload.test.js b/tests/get-form-control-payload.test.js index 86514b7..571dcc1 100644 --- a/tests/get-form-control-payload.test.js +++ b/tests/get-form-control-payload.test.js @@ -5,7 +5,7 @@ import { fireEvent, waitFor } from '@testing-library/dom'; import { FormPayloadError, getFormControlPayload } from '../src/index.js'; import { VALUE_AS_ARRAY_IDENTIFIER } from '../src/libs/constants/constants.js'; -import { ControlType } from '../src/libs/enums/enums.js'; +import { ControlElementType } from '../src/libs/enums/enums.js'; describe('getFormControlPayload should work correctly', () => { beforeEach(() => { @@ -15,14 +15,14 @@ describe('getFormControlPayload should work correctly', () => { describe('should work with HTMLInputElement correctly', () => { test('should get value from string inputs correctly', () => { const inputs = /** @type {const} */ ([ - [ControlType.TEXT, 'Name'], - [ControlType.PASSWORD, 'top-secret'], - [ControlType.SEARCH, 'apples'], - [ControlType.URL, 'form-payload.com'], - [ControlType.TEL, '10000000000'], - [ControlType.COLOR, '#999999'], - [ControlType.RADIO, 'color-1'], - [ControlType.HIDDEN, 'metrics'], + [ControlElementType.TEXT, 'Name'], + [ControlElementType.PASSWORD, 'top-secret'], + [ControlElementType.SEARCH, 'apples'], + [ControlElementType.URL, 'form-payload.com'], + [ControlElementType.TEL, '10000000000'], + [ControlElementType.COLOR, '#999999'], + [ControlElementType.RADIO, 'color-1'], + [ControlElementType.HIDDEN, 'metrics'], ]); for (const [type, value] of inputs) { @@ -32,11 +32,11 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - const controlValue = getFormControlPayload(control); + const controlValue = getFormControlPayload(controlElement); equal(typeof controlValue, 'string'); @@ -48,8 +48,8 @@ describe('getFormControlPayload should work correctly', () => { test('should get value from number inputs correctly', () => { const inputs = /** @type {const} */ ([ - [ControlType.NUMBER, 18], - [ControlType.RANGE, 69], + [ControlElementType.NUMBER, 18], + [ControlElementType.RANGE, 69], ]); for (const [type, value] of inputs) { @@ -59,15 +59,16 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = + getFormControlPayload(controlElement); - equal(typeof controlValue, 'number'); + equal(typeof controlElementValue, 'number'); - equal(controlValue, value); + equal(controlElementValue, value); document.body.innerHTML = ''; } @@ -76,7 +77,7 @@ describe('getFormControlPayload should work correctly', () => { describe('should get value from boolean inputs correctly', () => { test('should get value from regular boolean input correctly', () => { const inputs = /** @type {const} */ ([ - [ControlType.CHECKBOX, false], + [ControlElementType.CHECKBOX, false], ]); for (const [type, isChecked] of inputs) { @@ -89,15 +90,16 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = + getFormControlPayload(controlElement); - equal(typeof controlValue, 'boolean'); + equal(typeof controlElementValue, 'boolean'); - equal(controlValue, isChecked); + equal(controlElementValue, isChecked); document.body.innerHTML = ''; } @@ -105,9 +107,9 @@ describe('getFormControlPayload should work correctly', () => { test('should get single value from boolean input with collection identifier correctly', () => { const inputs = /** @type {const} */ ([ - [ControlType.CHECKBOX, 'banana', true], - [ControlType.CHECKBOX, 'apple', false], - [ControlType.CHECKBOX, 'apple', true], + [ControlElementType.CHECKBOX, 'banana', true], + [ControlElementType.CHECKBOX, 'apple', false], + [ControlElementType.CHECKBOX, 'apple', true], ]); for (const [type, value, isChecked] of inputs) { @@ -122,15 +124,16 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = + getFormControlPayload(controlElement); - equal(Array.isArray(controlValue), true); + equal(Array.isArray(controlElementValue), true); - deepEqual(controlValue, isChecked ? [value] : []); + deepEqual(controlElementValue, isChecked ? [value] : []); document.body.innerHTML = ''; } @@ -139,11 +142,11 @@ describe('getFormControlPayload should work correctly', () => { test('should get value from date inputs correctly', () => { const inputs = /** @type {const} */ ([ - [ControlType.DATE, '1998-08-03'], - [ControlType.TIME, '13:30'], - [ControlType.MONTH, '2001-06'], - [ControlType.WEEK, '2017-W01'], - [ControlType.DATETIME_LOCAL, '2018-06-12T19:30'], + [ControlElementType.DATE, '1998-08-03'], + [ControlElementType.TIME, '13:30'], + [ControlElementType.MONTH, '2001-06'], + [ControlElementType.WEEK, '2017-W01'], + [ControlElementType.DATETIME_LOCAL, '2018-06-12T19:30'], ]); for (const [type, value] of inputs) { @@ -153,13 +156,14 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = + getFormControlPayload(controlElement); - equal(controlValue instanceof Date, true); + equal(controlElementValue instanceof Date, true); document.body.innerHTML = ''; } @@ -171,19 +175,23 @@ describe('getFormControlPayload should work correctly', () => { document.body.innerHTML = /* HTML */ `
- +
`; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = + getFormControlPayload(controlElement); - equal(typeof controlValue, 'string'); + equal(typeof controlElementValue, 'string'); - equal(controlValue, email); + equal(controlElementValue, email); }); test('should get value from multiple email input correctly', () => { @@ -197,34 +205,37 @@ describe('getFormControlPayload should work correctly', () => { document.body.innerHTML = /* HTML */ `
`; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = + getFormControlPayload(controlElement); - equal(Array.isArray(controlValue), true); + equal(Array.isArray(controlElementValue), true); equal( - /** @type {string[]} */ (controlValue).length, + /** @type {string[]} */ (controlElementValue).length, emails.length, ); equal( - /** @type {string[]} */ (controlValue).every((email) => { - return email.trim().length === email.length; - }), + /** @type {string[]} */ (controlElementValue).every( + (email) => { + return email.trim().length === email.length; + }, + ), true, ); - deepEqual(controlValue, emails); + deepEqual(controlElementValue, emails); }); }); @@ -234,25 +245,28 @@ describe('getFormControlPayload should work correctly', () => { document.body.innerHTML = /* HTML */ `
- +
`; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - equal(getFormControlPayload(control), null); + equal(getFormControlPayload(controlElement), null); await waitFor(() => - fireEvent.change(control, { + fireEvent.change(controlElement, { target: { files: file, }, }), ); - equal(getFormControlPayload(control) instanceof File, true); + equal( + getFormControlPayload(controlElement) instanceof File, + true, + ); }); test('should get value from multiple file input correctly', async () => { @@ -263,34 +277,37 @@ describe('getFormControlPayload should work correctly', () => { document.body.innerHTML = /* HTML */ `
- +
`; - const control = /** @type {HTMLInputElement} */ ( + const controlElement = /** @type {HTMLInputElement} */ ( document.querySelector('input') ); - equal(Array.isArray(getFormControlPayload(control)), true); + equal( + Array.isArray(getFormControlPayload(controlElement)), + true, + ); await waitFor(() => - fireEvent.change(control, { + fireEvent.change(controlElement, { target: { files, }, }), ); - const controlValue = /** @type {File[]} */ ( - getFormControlPayload(control) + const controlElementValue = /** @type {File[]} */ ( + getFormControlPayload(controlElement) ); equal( - controlValue.every((file) => file instanceof File), + controlElementValue.every((file) => file instanceof File), true, ); - equal(controlValue.length, controlValue.length); + equal(controlElementValue.length, controlElementValue.length); }); }); }); @@ -305,15 +322,15 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLTextAreaElement} */ ( + const controlElement = /** @type {HTMLTextAreaElement} */ ( document.querySelector('textarea') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = getFormControlPayload(controlElement); - equal(typeof controlValue, 'string'); + equal(typeof controlElementValue, 'string'); - equal(controlValue, TEXTAREA_VALUE); + equal(controlElementValue, TEXTAREA_VALUE); }); }); @@ -348,15 +365,15 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLSelectElement} */ ( + const controlElement = /** @type {HTMLSelectElement} */ ( document.querySelector('select') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = getFormControlPayload(controlElement); - equal(typeof controlValue, 'string'); + equal(typeof controlElementValue, 'string'); - equal(controlValue, selectedValue); + equal(controlElementValue, selectedValue); }); test('should get value from multiple select correctly', () => { @@ -381,20 +398,20 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLSelectElement} */ ( + const controlElement = /** @type {HTMLSelectElement} */ ( document.querySelector('select') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = getFormControlPayload(controlElement); - equal(Array.isArray(controlValue), true); + equal(Array.isArray(controlElementValue), true); equal( - /** @type {unknown[]} */ (controlValue).length, + /** @type {unknown[]} */ (controlElementValue).length, selectedValues.length, ); - deepEqual(controlValue, selectedValues); + deepEqual(controlElementValue, selectedValues); }); }); @@ -408,15 +425,15 @@ describe('getFormControlPayload should work correctly', () => { `; - const control = /** @type {HTMLOutputElement} */ ( + const controlElement = /** @type {HTMLOutputElement} */ ( document.querySelector('output') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = getFormControlPayload(controlElement); - equal(typeof controlValue, 'string'); + equal(typeof controlElementValue, 'string'); - equal(controlValue, OUTPUT_VALUE); + equal(controlElementValue, OUTPUT_VALUE); }); }); @@ -465,39 +482,39 @@ describe('getFormControlPayload should work correctly', () => { document.body.innerHTML = /* HTML */ `
{
@@ -520,11 +537,11 @@ describe('getFormControlPayload should work correctly', () => {
`; - const control = /** @type {HTMLFieldSetElement} */ ( + const controlElement = /** @type {HTMLFieldSetElement} */ ( document.querySelector('fieldset') ); - deepEqual(getFormControlPayload(control), formPayload); + deepEqual(getFormControlPayload(controlElement), formPayload); }); test('should get value from multiple HTMLFieldSetElement correctly', () => { @@ -539,38 +556,44 @@ describe('getFormControlPayload should work correctly', () => { document.body.innerHTML = /* HTML */ `
`; - const control = /** @type {HTMLFieldSetElement} */ ( + const controlElement = /** @type {HTMLFieldSetElement} */ ( document.querySelector('fieldset') ); - const controlValue = getFormControlPayload(control); + const controlElementValue = getFormControlPayload(controlElement); - equal(Array.isArray(controlValue), true); + equal(Array.isArray(controlElementValue), true); - deepEqual(controlValue, [formPayload]); + deepEqual(controlElementValue, [formPayload]); }); }); - describe('should work correctly with an unexpected control type', () => { + describe('should work correctly with an unexpected control element type', () => { test('should throw FormPayloadError for elements without type', () => { - const control = /** @type {HTMLInputElement} */ ({}); + const controlElement = /** @type {HTMLInputElement} */ ({}); - throws(() => getFormControlPayload(control), FormPayloadError); + throws( + () => getFormControlPayload(controlElement), + FormPayloadError, + ); }); test('should throw FormPayloadError with unknown input type', () => { - const control = /** @type {HTMLInputElement} */ ({ + const controlElement = /** @type {HTMLInputElement} */ ({ type: 'unknown-type', }); - throws(() => getFormControlPayload(control), FormPayloadError); + throws( + () => getFormControlPayload(controlElement), + FormPayloadError, + ); }); }); }); diff --git a/tests/get-form-payload.test.js b/tests/get-form-payload.test.js index 21f44a5..55ff643 100644 --- a/tests/get-form-payload.test.js +++ b/tests/get-form-payload.test.js @@ -3,10 +3,10 @@ import { beforeEach, describe, test } from 'node:test'; import { getFormPayload } from '../src/index.js'; import { - BANNED_CONTROL_TYPES, + BANNED_CONTROL_ELEMENT_TYPES, VALUE_AS_ARRAY_IDENTIFIER, } from '../src/libs/constants/constants.js'; -import { ControlType } from '../src/libs/enums/enums.js'; +import { ControlElementType } from '../src/libs/enums/enums.js'; import { bannedElementNameToElementInstance } from '../src/libs/maps/maps.js'; describe('getFormPayload should work correctly', () => { @@ -14,20 +14,20 @@ describe('getFormPayload should work correctly', () => { document.body.innerHTML = ''; }); - test('should skip banned control types', () => { + test('should skip banned control element types', () => { document.body.innerHTML = /* HTML */ `
- ${BANNED_CONTROL_TYPES.map( + ${BANNED_CONTROL_ELEMENT_TYPES.map( (type) => ``, ).join(',')}
`; - const formNode = /** @type {HTMLFormElement} */ ( + const formElement = /** @type {HTMLFormElement} */ ( document.querySelector('form') ); - deepEqual(getFormPayload(formNode), {}); + deepEqual(getFormPayload(formElement), {}); }); test('should skip banned elements', () => { @@ -42,28 +42,28 @@ describe('getFormPayload should work correctly', () => { `; - const formNode = /** @type {HTMLFormElement} */ ( + const formElement = /** @type {HTMLFormElement} */ ( document.querySelector('form') ); - deepEqual(getFormPayload(formNode), {}); + deepEqual(getFormPayload(formElement), {}); }); - test('should skip controls without name', () => { + test('should skip control elements without name', () => { document.body.innerHTML = /* HTML */ `
`; - const formNode = /** @type {HTMLFormElement} */ ( + const formElement = /** @type {HTMLFormElement} */ ( document.querySelector('form') ); - deepEqual(getFormPayload(formNode), {}); + deepEqual(getFormPayload(formElement), {}); }); - describe('should get multiple value from controls with collection identifier correctly', () => { + describe('should get multiple value from control elements with collection identifier correctly', () => { test('should get multiple value from boolean inputs with collection identifier correctly', () => { const Fruit = { APPLE: 'apple', @@ -82,7 +82,7 @@ describe('getFormPayload should work correctly', () => { (fruit) => /* HTML */ ` { `; - const formNode = /** @type {HTMLFormElement} */ ( + const formElement = /** @type {HTMLFormElement} */ ( document.querySelector('form') ); - deepEqual(getFormPayload(formNode), formPayload); + deepEqual(getFormPayload(formElement), formPayload); }); test('should get multiple value from fieldsets with collection identifier correctly', () => { @@ -128,7 +128,7 @@ describe('getFormPayload should work correctly', () => { >
@@ -138,11 +138,11 @@ describe('getFormPayload should work correctly', () => { `; - const formNode = /** @type {HTMLFormElement} */ ( + const formElement = /** @type {HTMLFormElement} */ ( document.querySelector('form') ); - deepEqual(getFormPayload(formNode), formPayload); + deepEqual(getFormPayload(formElement), formPayload); }); }); @@ -171,28 +171,28 @@ describe('getFormPayload should work correctly', () => { document.body.innerHTML = /* HTML */ `
@@ -200,14 +200,14 @@ describe('getFormPayload should work correctly', () => { `; - const formNode = /** @type {HTMLFormElement} */ ( + const formElement = /** @type {HTMLFormElement} */ ( document.querySelector('form') ); - deepEqual(getFormPayload(formNode), formPayload); + deepEqual(getFormPayload(formElement), formPayload); }); - describe('should get multiple value from controls with collection identifier correctly', () => { + describe('should get multiple value from control elements with collection identifier correctly', () => { test('should get multiple value from boolean inputs with collection identifier correctly', () => { const Fruit = { APPLE: 'apple', @@ -226,7 +226,7 @@ describe('getFormPayload should work correctly', () => { (fruit) => /* HTML */ ` { `; - const formNode = /** @type {HTMLFormElement} */ ( + const formElement = /** @type {HTMLFormElement} */ ( document.querySelector('form') ); - deepEqual(getFormPayload(formNode), formPayload); + deepEqual(getFormPayload(formElement), formPayload); }); }); }); diff --git a/tsconfig.json b/tsconfig.json index 4d48559..3e061a2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "include": ["**/*.js"], - "exclude": ["node_modules"], + "exclude": ["node_modules", "dist"], "compilerOptions": { "skipLibCheck": true, "lib": ["DOM", "DOM.Iterable", "ESNext"],