remix-validated-form 4.1.4-beta.0 → 4.1.6

package/browser/internal/logic/setInputValueInForm.js

@@ -1,22 +1,21 @@
 import invariant from "tiny-invariant";
+import { isCheckbox, isMultiselect, isRadio } from "./elementUtils";
 import { getCheckboxChecked } from "./getCheckboxChecked";
 /**
  * Helper class to track the values being set on uncontrolled fields.
  * HTML is super permissive with inputs that all share the same `name`.
- *
- * This class is strict in the sense that, if the user provides an array value,
- * the values inside the array must be in the same order as the elements in the DOM.
- * Doing this allows us to be flexible with what types of form controls the user is using.
- *
- * This is how HTML tracks inputs of the same name as well.
- * `new FormData(formElement).getAll('myField')` will return values in DOM order.
  */
 class Values {
     constructor(values) {
         this.hasSetRadioValue = false;
+        this.remove = (value) => {
+            const index = this.values.indexOf(value);
+            const deleted = this.values.splice(index, 1);
+            return deleted.length > 0;
+        };
         this.bool = (value) => {
-            if (getCheckboxChecked(value, this.values[0])) {
-                this.values.shift();
+            if (getCheckboxChecked(value, this.values)) {
+                this.remove(value) || this.remove(true);
                 return true;
             }
             return false;
@@ -41,32 +40,6 @@ class Values {
         this.values = unknownValues;
     }
 }
-/**
- * This subclass is order-permissive, meaning the user doesn't have to worry about
- * the order in which the inputs occur in the DOM.
- * This is useful for multiselects and checkbox groups and provides a better DX than
- * the order-strict version.
- */
-class PermissiveValues extends Values {
-    constructor() {
-        super(...arguments);
-        this.remove = (value) => {
-            const index = this.values.indexOf(value);
-            const deleted = this.values.splice(index, 1);
-            return deleted.length > 0;
-        };
-        this.bool = (value) => {
-            if (getCheckboxChecked(value, this.values)) {
-                this.remove(value) || this.remove(true);
-                return true;
-            }
-            return false;
-        };
-    }
-}
-const isMultiselect = (node) => node instanceof HTMLSelectElement && node.multiple;
-const isCheckbox = (node) => node instanceof HTMLInputElement && node.type === "checkbox";
-const isRadio = (node) => node instanceof HTMLInputElement && node.type === "radio";
 const setElementValue = (element, values, field) => {
     if (isMultiselect(element)) {
         for (const option of element.options) {
@@ -86,34 +59,18 @@ const setElementValue = (element, values, field) => {
     invariant(input.type !== "hidden", `Cannot set value on hidden input if it is not a controlled field. Field being updated was ${field}.`);
     input.value = values.str();
 };
-const areElementsTheSameType = (nodes) => {
-    const getType = (node) => {
-        if (node instanceof HTMLInputElement)
-            return node.type;
-        if (node instanceof HTMLSelectElement)
-            return node.multiple ? "select" : "multiselect";
-        return null;
-    };
-    const firstElementInstance = nodes[0].constructor;
-    const firstElementType = getType(nodes[0]);
-    return nodes.every((element) => element.constructor === firstElementInstance &&
-        getType(element) === firstElementType);
-};
 export const setInputValueInForm = (formElement, name, value) => {
     const controlElement = formElement.elements.namedItem(name);
     if (!controlElement)
         return;
+    const values = new Values(value);
     if (controlElement instanceof RadioNodeList) {
-        const values = areElementsTheSameType([...controlElement])
-            ? new PermissiveValues(value)
-            : new Values(value);
         for (const element of controlElement) {
             setElementValue(element, values, name);
         }
         values.warnIfLeftovers(name);
     }
     else {
-        const values = new PermissiveValues(value);
         setElementValue(controlElement, values, name);
         values.warnIfLeftovers(name);
     }