Merge pull request #27 from klm-lab/dev

Add domProps

README.md

@@ -34,7 +34,7 @@ An input state management for React. It comes with useful common validations if
 [MIT][license-url]
 
 
-[size-shield]: https://img.shields.io/bundlephobia/minzip/aio-inputs/2.1.10?style=for-the-badge
+[size-shield]: https://img.shields.io/bundlephobia/minzip/aio-inputs/2.1.11?style=for-the-badge
 
 [license-shield]: https://img.shields.io/github/license/klm-lab/inputs?style=for-the-badge
 

examples/README.md

@@ -38,7 +38,7 @@ Tracking inputs [HERE][no-tracking-link]
 [MIT][license-url]
 
 
-[size-shield]: https://img.shields.io/bundlephobia/minzip/aio-inputs/2.1.10?style=for-the-badge
+[size-shield]: https://img.shields.io/bundlephobia/minzip/aio-inputs/2.1.11?style=for-the-badge
 
 [license-shield]: https://img.shields.io/github/license/klm-lab/inputs?style=for-the-badge
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aio-inputs",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "An opinionated inputs state manager for react",
   "scripts": {
     "build": "npm ci && npm run build:noci",

src/inputs/handlers/changes.ts

@@ -3,8 +3,8 @@ import type {
   Helper,
   InputStore,
   ParsedFile,
-  RequiredInput,
-  RequiredObjInput
+  Input,
+  ObjectInput
 } from "../../types";
 import { AsyncValidationParams } from "../../types";
 import { asyncValidation, validate } from "../../util/validation";
@@ -45,7 +45,7 @@ const asyncCallback = ({
 };
 
 const onChange = (
-  input: RequiredInput,
+  input: Input,
   element: HTMLInputElement | HTMLSelectElement,
   store: InputStore,
   config: Config,
@@ -83,15 +83,17 @@ const onChange = (
     for (const key in clone) {
       if (clone[key].type === "radio" && clone[key].name === clone[ID].name) {
         clone[key].checked = clone[key].value === value;
+        clone[key].domProps.checked = clone[key].value === value;
         clone[key].valid = true;
       }
     }
   } else if (input.type === "checkbox") {
     // Toggle the checkbox input
     clone[ID].checked = !clone[ID].checked;
+    clone[ID].domProps.checked = !clone[ID].domProps.checked;
   } else {
-    // Parse value if valid and if number
     clone[ID].value = value;
+    clone[ID].domProps.value = value;
   }
   // Touched input
   clone[ID].touched = true;
@@ -118,7 +120,7 @@ const onChange = (
   syncChanges(store, clone);
 };
 
-const syncChanges = (store: InputStore, data: RequiredObjInput) => {
+const syncChanges = (store: InputStore, data: ObjectInput) => {
   store.set((ref) => {
     ref.entry = data;
     ref.isValid = validateState(data);
@@ -128,7 +130,7 @@ const syncChanges = (store: InputStore, data: RequiredObjInput) => {
 export const inputChange = (
   value: any,
   key: string,
-  entry: RequiredObjInput,
+  entry: ObjectInput,
   store: InputStore,
   config: Config,
   helper: Helper

src/inputs/handlers/checkbox.ts

@@ -1,6 +1,6 @@
-import type { RequiredObjInput } from "../../types";
+import type { ObjectInput } from "../../types";
 
-export const createCheckboxValue = (clone: RequiredObjInput, ID: string) => {
+export const createCheckboxValue = (clone: ObjectInput, ID: string) => {
   const selected = [] as string[];
   !clone[ID].checked && selected.push(clone[ID].value);
   for (const key in clone) {

src/inputs/handlers/files.ts

@@ -4,14 +4,14 @@ import type {
   InitFileConfig,
   InputStore,
   ParsedFile,
-  RequiredObjInput
+  ObjectInput
 } from "../../types";
 import { validate } from "../../util/validation";
 import { validateState } from "../../util";
 
 export const createFiles = (
   files: FileList | null,
-  clone: RequiredObjInput,
+  clone: ObjectInput,
   ID: string,
   store: InputStore,
   config: Config,
@@ -44,7 +44,7 @@ export const createFiles = (
 };
 
 export const parseFile = (
-  clone: RequiredObjInput,
+  clone: ObjectInput,
   ID: string,
   store: InputStore,
   config: Config,
@@ -104,7 +104,7 @@ export const parseFile = (
 export const blobStringJob = (
   value: any,
   store: InputStore,
-  clone: RequiredObjInput,
+  clone: ObjectInput,
   ID: string,
   config: Config,
   fileConfig: InitFileConfig,
@@ -145,7 +145,7 @@ export const blobStringJob = (
 export const retrieveBlob = (
   value: any,
   store: InputStore,
-  clone: RequiredObjInput,
+  clone: ObjectInput,
   ID: string,
   config: Config,
   fileConfig: InitFileConfig,

src/inputs/handlers/select.ts

@@ -1,9 +1,9 @@
-import type { RequiredObjInput } from "../../types";
+import type { ObjectInput } from "../../types";
 
 export const createSelectFiles = (
   isEvent: boolean,
   element: HTMLSelectElement,
-  clone: RequiredObjInput,
+  clone: ObjectInput,
   ID: string
 ) => {
   let selected = [] as string[];

src/inputs/index.ts

@@ -2,24 +2,26 @@ import type {
   ArrayStateOutput,
   ComputeOnceOut,
   Config,
+  CreateArrayInput,
+  CreateObjectInput,
   ForEachCallback,
   Helper,
   InitFileConfig,
   Input,
   InputStore,
+  InternalInput,
   IsValid,
   MapCallback,
   Method,
-  ObjInput,
+  ObjectInput,
   ObjStateOutput,
-  RequiredInput,
-  RequiredObjInput,
   StateType,
   StringStateOutput
 } from "../types";
 import {
   commonProps,
   extractValues,
+  lockProps,
   matchRules,
   parseValue,
   touchInput,
@@ -34,7 +36,7 @@ import { inputChange } from "./handlers/changes";
 import { validate } from "../util/validation";
 
 const init = (
-  input: RequiredInput,
+  input: Input,
   value: unknown,
   store: InputStore,
   config: Config,
@@ -57,12 +59,16 @@ const init = (
   if (input.type === "radio") {
     // Check right radio input
     clone[ID].checked = clone[ID].value === value;
+    clone[ID].domProps.checked = clone[ID].value === value;
   } else if (input.type === "checkbox") {
     // Toggle the checkbox input
-    clone[ID].checked = (value as unknown[]).includes(clone[ID].value);
+    const cbV = (value as unknown[]).includes(clone[ID].value);
+    clone[ID].checked = cbV;
+    clone[ID].domProps.checked = cbV;
   } else {
     // Parse value if number
     clone[ID].value = parseValue(input, value);
+    clone[ID].domProps.value = parseValue(input, value);
   }
   // Sync handlers
   store.set((ref) => {
@@ -72,20 +78,21 @@ const init = (
 };
 
 const populate = (state: any, type: StateType, config: Config) => {
-  const final = {} as ObjInput;
+  const final = {} as CreateObjectInput;
   const helper = He();
   for (const stateKey in state) {
     const parseKey = type === "object" ? stateKey : state[stateKey].id;
     const key = crypto.randomUUID();
-    const v = {
+    const v: Input = {
       ...commonProps(state[stateKey], stateKey),
       ...state[stateKey],
       ...(type === "object" ? { id: stateKey, key } : { key })
     };
+    v.domProps = lockProps(v);
     final[parseKey] = v;
     helper.s[parseKey] = { ...v };
   }
-  const entry = helper.clean(matchRules(final, helper)) as RequiredObjInput;
+  const entry = helper.clean(matchRules(final, helper)) as ObjectInput;
   const isValid = validateState(entry);
   return {
     entry,
@@ -114,6 +121,8 @@ const computeOnce = (
     for (const key in entry) {
       ref.entry[key].onChange = (value) =>
         inputChange(value, key, entry, store, config, helper);
+      ref.entry[key].domProps.onChange = (value) =>
+        inputChange(value, key, entry, store, config, helper);
       ref.entry[key].init = (value, fileConfig: InitFileConfig = {}) =>
         init(entry[key], value, store, config, fileConfig, helper);
       ref.entry[key].files = [];
@@ -155,13 +164,13 @@ const computeOnce = (
 
   const map = (callback: MapCallback) => loop(callback, "map") as unknown[];
 
-  const toArray = (): RequiredInput[] & IsValid => {
-    const r = transformToArray(store.get("entry")) as RequiredInput[] & IsValid;
+  const toArray = (): Input[] & IsValid => {
+    const r = transformToArray(store.get("entry")) as Input[] & IsValid;
     r.isValid = store.get("isValid");
     return r;
   };
-  const toObject = (): RequiredObjInput & IsValid => {
-    const r = store.get("entry") as RequiredObjInput & IsValid;
+  const toObject = (): ObjectInput & IsValid => {
+    const r = store.get("entry") as ObjectInput & IsValid;
     r.isValid = store.get("isValid");
     return r;
   };
@@ -226,18 +235,21 @@ const parsedInputs = (
   const form = useMemo(() => rest, []);
 
   const parsedInputs =
-    type === "object" ? inputs : transformToArray(inputs as RequiredObjInput);
+    type === "object" ? inputs : transformToArray(inputs as ObjectInput);
   (parsedInputs as typeof parsedInputs & IsValid).isValid = isValid;
   return [parsedInputs, form];
 };
 
 function useInputs<S>(
-  initialState: ObjInput | S,
+  initialState: CreateObjectInput | S,
   config?: Config
 ): ObjStateOutput<keyof S>;
-function useInputs(initialState: Input[], config?: Config): ArrayStateOutput;
 function useInputs(
-  initialState: (string | Input)[],
+  initialState: CreateArrayInput,
+  config?: Config
+): ArrayStateOutput;
+function useInputs(
+  initialState: (string | InternalInput)[],
   config?: Config
 ): ArrayStateOutput;
 function useInputs(initialState: string, config?: Config): StringStateOutput;