Merge pull request #29 from klm-lab/dev

Add new form feature
klm-lab · Nov 25, 2023 · 18e615f · 18e615f
2 parents 139bd0b + b44c713
commit 18e615f
Show file tree

Hide file tree

Showing 15 changed files with 250 additions and 158 deletions.
diff --git a/README.md b/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.12?style=for-the-badge
+[size-shield]: https://img.shields.io/bundlephobia/minzip/aio-inputs/2.1.13?style=for-the-badge
 
 [license-shield]: https://img.shields.io/github/license/klm-lab/inputs?style=for-the-badge
 

diff --git a/examples/README.md b/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.12?style=for-the-badge
+[size-shield]: https://img.shields.io/bundlephobia/minzip/aio-inputs/2.1.13?style=for-the-badge
 
 [license-shield]: https://img.shields.io/github/license/klm-lab/inputs?style=for-the-badge
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aio-inputs",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "An opinionated inputs state manager for react",
   "scripts": {
     "build": "npm ci && npm run build:noci",
@@ -79,7 +79,7 @@
     "state"
   ],
   "dependencies": {
-    "aio-store": "^2.4.3"
+    "aio-store": "^2.4.41"
   },
   "peerDependencies": {
     "react": "^18.2.0"

diff --git a/src/inputs/handlers/changes.ts b/src/inputs/handlers/changes.ts
@@ -1,10 +1,10 @@
 import type {
-  Config,
   Helper,
-  InputStore,
-  ParsedFile,
   Input,
-  ObjectInput
+  InputConfig,
+  InputStore,
+  ObjectInputs,
+  ParsedFile
 } from "../../types";
 import { AsyncValidationParams } from "../../types";
 import { asyncValidation, validate } from "../../util/validation";
@@ -48,7 +48,7 @@ const onChange = (
   input: Input,
   element: HTMLInputElement | HTMLSelectElement,
   store: InputStore,
-  config: Config,
+  config: InputConfig,
   isEvent: boolean,
   helper: Helper
 ) => {
@@ -66,8 +66,12 @@ const onChange = (
           config,
           helper
         )
-      : input.type === "select" && input.multiple
-      ? createSelectFiles(isEvent, element as HTMLSelectElement, clone, ID)
+      : input.type === "select"
+      ? input.multiple
+        ? createSelectFiles(isEvent, element as HTMLSelectElement, clone, ID)
+        : element.value !== "" && element.value !== clone[ID].placeholder
+        ? element.value
+        : ""
       : element.value;
 
   const toValidate =
@@ -120,7 +124,7 @@ const onChange = (
   syncChanges(store, clone);
 };
 
-const syncChanges = (store: InputStore, data: ObjectInput) => {
+const syncChanges = (store: InputStore, data: ObjectInputs<string>) => {
   store.set((ref) => {
     ref.entry = data;
     ref.isValid = validateState(data).isValid;
@@ -130,9 +134,9 @@ const syncChanges = (store: InputStore, data: ObjectInput) => {
 export const inputChange = (
   value: any,
   key: string,
-  entry: ObjectInput,
+  entry: ObjectInputs<string>,
   store: InputStore,
-  config: Config,
+  config: InputConfig,
   helper: Helper
 ) => {
   const isEvent =

diff --git a/src/inputs/handlers/checkbox.ts b/src/inputs/handlers/checkbox.ts
@@ -1,7 +1,7 @@
-import type { ObjectInput } from "../../types";
+import type { ObjectInputs } from "../../types";
 
 export const createCheckboxValue = (
-  clone: ObjectInput,
+  clone: ObjectInputs<string>,
   ID: string,
   userChange = true
 ) => {

diff --git a/src/inputs/handlers/files.ts b/src/inputs/handlers/files.ts
@@ -1,20 +1,20 @@
 import type {
-  Config,
+  InputConfig,
   Helper,
   InitFileConfig,
   InputStore,
   ParsedFile,
-  ObjectInput
+  ObjectInputs
 } from "../../types";
 import { validate } from "../../util/validation";
 import { validateState } from "../../util";
 
 export const createFiles = (
   files: FileList | null,
-  clone: ObjectInput,
+  clone: ObjectInputs<string>,
   ID: string,
   store: InputStore,
-  config: Config,
+  config: InputConfig,
   helper: Helper
 ) => {
   const entry = clone[ID];
@@ -44,10 +44,10 @@ export const createFiles = (
 };
 
 export const parseFile = (
-  clone: ObjectInput,
+  clone: ObjectInputs<string>,
   ID: string,
   store: InputStore,
-  config: Config,
+  config: InputConfig,
   url: string,
   gettingFile: boolean,
   file: File,
@@ -87,26 +87,19 @@ export const parseFile = (
   };
 };
 
-// export const getFile = async (url: string, fileConfig: InitFileConfig) => {
-//   const URL = fileConfig.useDefaultProxyUrl
-//     ? "cors-anywhere.herokuapp.com/" + url
-//     : fileConfig.proxyUrl
-//     ? fileConfig.proxyUrl + "/" + url
-//     : url;
-//   const blob = await fetch(URL).then((r) => r.blob());
-//   const fileName = url.match(/([a-z0-9_-]+\.\w+)(?!.*\/)/gi);
-//   const name = fileName ? fileName[0] : "";
-//   return new File([blob], name, {
-//     type: blob.type
-//   });
-// };
+const getFile = (url: string, blob: Blob) => {
+  const fileName = url.match(/([a-z0-9_-]+\.\w+)(?!.*\/)/gi);
+  return new File([blob], fileName ? fileName[0] : "", {
+    type: blob.type
+  });
+};
 
 export const blobStringJob = (
   value: any,
   store: InputStore,
-  clone: ObjectInput,
+  clone: ObjectInputs<string>,
   ID: string,
-  config: Config,
+  config: InputConfig,
   fileConfig: InitFileConfig,
   index: number,
   valid: boolean,
@@ -126,28 +119,21 @@ export const blobStringJob = (
     ref.entry[ID].valid = valid;
   });
   if (fileConfig.getBlob) {
-    Promise.resolve(fileConfig.getBlob(value)).then((file) => {
+    Promise.resolve(fileConfig.getBlob(value)).then((blob) => {
       store.set((ref) => {
         ref.entry[ID].files[index].gettingFile = false;
-        ref.entry[ID].files[index].file = file;
+        ref.entry[ID].files[index].file = getFile(value, blob);
       });
     });
   }
-
-  // getFile(value, fileConfig).then((file) => {
-  //   store.set((ref) => {
-  //     ref.entry[ID].files[index].gettingFile = false;
-  //     ref.entry[ID].files[index].file = file;
-  //   });
-  // });
 };
 
 export const retrieveBlob = (
   value: any,
   store: InputStore,
-  clone: ObjectInput,
+  clone: ObjectInputs<string>,
   ID: string,
-  config: Config,
+  config: InputConfig,
   fileConfig: InitFileConfig,
   valid: boolean,
   helper: Helper

diff --git a/src/inputs/handlers/radio.ts b/src/inputs/handlers/radio.ts
@@ -1,6 +1,6 @@
-import type { ObjectInput } from "../../types";
+import type { ObjectInputs } from "../../types";
 
-export const radioIsChecked = (clone: ObjectInput, ID: string) => {
+export const radioIsChecked = (clone: ObjectInputs<string>, ID: string) => {
   let isSelected = false;
   for (const key in clone) {
     if (

diff --git a/src/inputs/handlers/select.ts b/src/inputs/handlers/select.ts
@@ -1,24 +1,28 @@
-import type { ObjectInput } from "../../types";
+import type { ObjectInputs } from "../../types";
 
 export const createSelectFiles = (
   isEvent: boolean,
   element: HTMLSelectElement,
-  clone: ObjectInput,
+  clone: ObjectInputs<string>,
   ID: string
 ) => {
   let selected = [] as string[];
   if (isEvent) {
     const els = element.selectedOptions;
     for (let i = 0; i < els.length; i++) {
-      selected.push(els[i].value);
+      els[i].value !== "" &&
+        els[i].value !== clone[ID].placeholder &&
+        selected.push(els[i].value);
     }
   } else {
     // Not need to clone, we keep the same reference safely
     selected = clone[ID].value;
     if (selected.includes(element.value)) {
       selected = selected.filter((v: any) => v !== element.value);
     } else {
-      selected.push(element.value);
+      element.value !== "" &&
+        element.value !== clone[ID].placeholder &&
+        selected.push(element.value);
     }
   }
   return selected;