react-hook-core 0.4.5 → 0.4.7

package/src/state.ts

@@ -1,194 +1,205 @@
-import {Locale, ModelProps} from './core';
-import {setValue} from './reflect';
-import {valueOf} from './util';
+import { Locale } from "./core"
+import { setValue } from "./reflect"
+import { valueOf } from "./util"
 
 export const enLocale = {
-  'id': 'en-US',
-  'countryCode': 'US',
-  'dateFormat': 'M/d/yyyy',
-  'firstDayOfWeek': 1,
-  'decimalSeparator': '.',
-  'groupSeparator': ',',
-  'decimalDigits': 2,
-  'currencyCode': 'USD',
-  'currencySymbol': '$',
-  'currencyPattern': 0
-};
+  id: "en-US",
+  countryCode: "US",
+  dateFormat: "M/d/yyyy",
+  firstDayOfWeek: 1,
+  decimalSeparator: ".",
+  groupSeparator: ",",
+  decimalDigits: 2,
+  currencyCode: "USD",
+  currencySymbol: "$",
+  currencyPattern: 0,
+}
 export function localeOf(lc?: Locale, glc?: (() => Locale) | Locale): Locale {
-  let l: Locale|undefined = lc;
+  let l: Locale | undefined = lc
   if (!l) {
     if (glc) {
-      if (typeof glc === 'function') {
-        l = glc();
+      if (typeof glc === "function") {
+        l = glc()
       } else {
-        l = glc;
+        l = glc
       }
     }
     if (!l) {
-      l = enLocale;
+      l = enLocale
     }
   }
-  return l;
+  return l
 }
 export function handleEvent(e: any, removeErr?: (ctrl: HTMLInputElement) => void) {
-  const ctrl = e.currentTarget as HTMLInputElement;
-  const type = ctrl.getAttribute('type');
-  const isPreventDefault = type && (['checkbox', 'radio'].indexOf(type.toLowerCase()) >= 0 ? false : true);
+  const ctrl = e.currentTarget as HTMLInputElement
+  const type = ctrl.getAttribute("type")
+  const isPreventDefault = type && (["checkbox", "radio"].indexOf(type.toLowerCase()) >= 0 ? false : true)
   if (isPreventDefault) {
-    e.preventDefault();
+    e.preventDefault()
   }
-  if (
-    removeErr &&
-    ctrl.nodeName === 'SELECT' &&
-    ctrl.value &&
-    ctrl.classList.contains('invalid')) {
-    removeErr(ctrl);
+  if (removeErr && ctrl.nodeName === "SELECT" && ctrl.value && ctrl.classList.contains("invalid")) {
+    removeErr(ctrl)
   }
 }
-export function handleProps<P extends ModelProps>(e: any, props: P, ctrl: HTMLInputElement, modelName: string, tloc: Locale, prepareData?: (data: any) => void) {
+
+export interface ModelMap {
+  [key: string]: any
+}
+export interface ModelProps {
+  setGlobalState?: (m: ModelMap) => void
+  shouldBeCustomized?: boolean
+}
+export function handleProps<P extends ModelProps>(
+  e: any,
+  props: P,
+  ctrl: HTMLInputElement,
+  modelName: string,
+  tloc: Locale,
+  prepareData?: (data: any) => void,
+) {
   if (props.setGlobalState) {
-    const res = valueOf(ctrl, tloc, e.type);
+    const res = valueOf(ctrl, tloc, e.type)
     if (res.mustChange) {
-      const dataField = ctrl.getAttribute('data-field');
-      const field = (dataField ? dataField : ctrl.name);
-      const propsDataForm = (props as any)[modelName];
-      const form = ctrl.form;
+      const dataField = ctrl.getAttribute("data-field")
+      const field = dataField ? dataField : ctrl.name
+      const propsDataForm = (props as any)[modelName]
+      const form = ctrl.form
       if (form) {
-        const formName = form.name;
-        if (field.indexOf('.') < 0 && field.indexOf('[') < 0) {
-          const data = props.shouldBeCustomized && prepareData ? prepareData({ [ctrl.name]: res.value }) : { [ctrl.name]: res.value };
-          props.setGlobalState({ [formName]: { ...propsDataForm, ...data } });
+        const formName = form.name
+        if (field.indexOf(".") < 0 && field.indexOf("[") < 0) {
+          const data = props.shouldBeCustomized && prepareData ? prepareData({ [ctrl.name]: res.value }) : { [ctrl.name]: res.value }
+          props.setGlobalState({ [formName]: { ...propsDataForm, ...data } })
         } else {
-          setValue(propsDataForm, field, ctrl.value);
-          props.setGlobalState({ [formName]: { ...propsDataForm } });
+          setValue(propsDataForm, field, ctrl.value)
+          props.setGlobalState({ [formName]: { ...propsDataForm } })
         }
       }
     }
   }
 }
-export function buildState<S, K extends keyof S>(e: any, state: Readonly<S>, ctrl: HTMLInputElement, modelName: string, tloc: Locale): K|undefined {
-  const form = ctrl.form;
+export function buildState<S, K extends keyof S>(e: any, state: Readonly<S>, ctrl: HTMLInputElement, modelName: string, tloc: Locale): K | undefined {
+  const form = ctrl.form
   if (form) {
-    if (modelName && modelName !== '') {
-      const type = ctrl.getAttribute('type');
-      const ex = (state as any)[modelName];
-      const dataField = ctrl.getAttribute('data-field');
-      const field = (dataField ? dataField : ctrl.name);
-      const model = Object.assign({}, ex);
-      if (type && type.toLowerCase() === 'checkbox') {
-        let value = model[field];
+    if (modelName && modelName !== "") {
+      const type = ctrl.getAttribute("type")
+      const ex = (state as any)[modelName]
+      const dataField = ctrl.getAttribute("data-field")
+      const field = dataField ? dataField : ctrl.name
+      const model = Object.assign({}, ex)
+      if (type && type.toLowerCase() === "checkbox") {
+        let value = model[field]
         if (ctrl.id && ctrl.name !== ctrl.id) {
           if (!value || !Array.isArray(value)) {
-            value = [];
+            value = []
           }
-          value.includes(ctrl.value) ? value = value.filter((v: string) => v !== ctrl.value) : value.push(ctrl.value);
+          value.includes(ctrl.value) ? (value = value.filter((v: string) => v !== ctrl.value)) : value.push(ctrl.value)
           // if (dType == 'array'){
           //   if (value === 'string'){
           //     value = [value]
           //   }
           // }
-          model[field] = value;
+          model[field] = value
           // console.log(model,  modelName, model, model[field], field, value )
           // setValue(model, field, value);
         } else {
-          const v = valueOfCheckbox(ctrl);
-          model[field] = v;
+          const v = valueOfCheckbox(ctrl)
+          model[field] = v
         }
-        const objSet: any = {};
-        objSet[modelName] = model;
-        return objSet;
-      } else if (type && type.toLowerCase() === 'radio') {
-        if (field.indexOf('.') < 0 && field.indexOf('[') < 0 ) {
-          model[field] = ctrl.value;
+        const objSet: any = {}
+        objSet[modelName] = model
+        return objSet
+      } else if (type && type.toLowerCase() === "radio") {
+        if (field.indexOf(".") < 0 && field.indexOf("[") < 0) {
+          model[field] = ctrl.value
         } else {
-          setValue(model, field, ctrl.value);
+          setValue(model, field, ctrl.value)
         }
-        const objSet: any = {};
-        objSet[modelName] = model;
-        return objSet;
-      } else if (type && (type.toLowerCase() === 'date' || type.toLowerCase() === 'datetime-local')) {
-        const objSet: any = {};
+        const objSet: any = {}
+        objSet[modelName] = model
+        return objSet
+      } else if (type && (type.toLowerCase() === "date" || type.toLowerCase() === "datetime-local")) {
+        const objSet: any = {}
         try {
-          const selectedDate = new Date(ctrl.value);
-          setValue(model, field, ctrl.value && ctrl.value!== '' ? selectedDate.toISOString() : null);
-          objSet[modelName] = model;
-          return objSet;
+          const selectedDate = new Date(ctrl.value)
+          setValue(model, field, ctrl.value && ctrl.value !== "" ? selectedDate.toISOString() : null)
+          objSet[modelName] = model
+          return objSet
         } catch (error) {
-          console.error('Error occurred while formatting date:', error);
+          console.error("Error occurred while formatting date:", error)
         }
-        return objSet;
-    } else if (type && (type.toLowerCase() === 'time')) {
-      const objSet: any = {};
-      try {
-        const selectedDate = new Date(ctrl.value);
-        setValue(model, field, selectedDate.getTime());
-        objSet[modelName] = model;
-        return objSet;
-      } catch (error) {
-        console.error('Error occurred while formatting time:', error);
-      }
-      return objSet;
-    } else {
-        if (ctrl.tagName === 'SELECT') {
-          if (ctrl.value === '' || !ctrl.value) {
-            ctrl.removeAttribute('data-value');
+        return objSet
+      } else if (type && type.toLowerCase() === "time") {
+        const objSet: any = {}
+        try {
+          const selectedDate = new Date(ctrl.value)
+          setValue(model, field, selectedDate.getTime())
+          objSet[modelName] = model
+          return objSet
+        } catch (error) {
+          console.error("Error occurred while formatting time:", error)
+        }
+        return objSet
+      } else {
+        if (ctrl.tagName === "SELECT") {
+          if (ctrl.value === "" || !ctrl.value) {
+            ctrl.removeAttribute("data-value")
           } else {
-            ctrl.setAttribute('data-value', 'data-value');
+            ctrl.setAttribute("data-value", "data-value")
           }
         }
-        const data = valueOf(ctrl, tloc, e.type);
+        const data = valueOf(ctrl, tloc, e.type)
         if (data.mustChange) {
-          if (field.indexOf('.') < 0 && field.indexOf('[') < 0) {
-            model[field] = data.value;
+          if (field.indexOf(".") < 0 && field.indexOf("[") < 0) {
+            model[field] = data.value
           } else {
-            setValue(model, field, data.value);
+            setValue(model, field, data.value)
           }
-          const objSet: any = {};
-          objSet[modelName] = model;
-          return objSet;
+          const objSet: any = {}
+          objSet[modelName] = model
+          return objSet
         }
       }
     } else {
-      return buildFlatState(e, state, tloc);
+      return buildFlatState(e, state, tloc)
     }
   } else {
-    buildFlatState(e, state, tloc);
+    buildFlatState(e, state, tloc)
   }
 }
-export function valueOfCheckbox(ctrl: HTMLInputElement): string|number|boolean {
-  const ctrlOnValue = ctrl.getAttribute('data-on-value');
-  const ctrlOffValue = ctrl.getAttribute('data-off-value');
+export function valueOfCheckbox(ctrl: HTMLInputElement): string | number | boolean {
+  const ctrlOnValue = ctrl.getAttribute("data-on-value")
+  const ctrlOffValue = ctrl.getAttribute("data-off-value")
   if (ctrlOnValue && ctrlOffValue) {
-    const onValue = ctrlOnValue ? ctrlOnValue : true;
-    const offValue = ctrlOffValue ? ctrlOffValue : false;
-    return ctrl.checked === true ? onValue : offValue;
+    const onValue = ctrlOnValue ? ctrlOnValue : true
+    const offValue = ctrlOffValue ? ctrlOffValue : false
+    return ctrl.checked === true ? onValue : offValue
   } else {
-    return ctrl.checked === true;
+    return ctrl.checked === true
   }
 }
-export function buildFlatState<S, K extends keyof S>(e: any, state: Readonly<S>, l?: Locale): K|undefined {
-  const ctrl = e.currentTarget as HTMLInputElement;
-  const stateName = ctrl.name;
-  const objSet: any = {};
-  const type = ctrl.getAttribute('type');
-  if (type && type.toLowerCase() === 'checkbox') {
+export function buildFlatState<S, K extends keyof S>(e: any, state: Readonly<S>, l?: Locale): K | undefined {
+  const ctrl = e.currentTarget as HTMLInputElement
+  const stateName = ctrl.name
+  const objSet: any = {}
+  const type = ctrl.getAttribute("type")
+  if (type && type.toLowerCase() === "checkbox") {
     if (ctrl.id && stateName === ctrl.id) {
-      const v = valueOfCheckbox(ctrl);
-      objSet[stateName] = v;
-      return objSet;
+      const v = valueOfCheckbox(ctrl)
+      objSet[stateName] = v
+      return objSet
     } else {
-      let value = (state as any)[stateName];
-      value.includes(ctrl.value) ? value = value.filter((v: string) => v !== ctrl.value) : value.push(ctrl.value);
-      const objSet2: any = {[ctrl.name]: value};
-      return objSet2;
+      let value = (state as any)[stateName]
+      value.includes(ctrl.value) ? (value = value.filter((v: string) => v !== ctrl.value)) : value.push(ctrl.value)
+      const objSet2: any = { [ctrl.name]: value }
+      return objSet2
     }
   } else {
-    const data = valueOf(ctrl, l, e.type);
+    const data = valueOf(ctrl, l, e.type)
     if (data.mustChange) {
-      objSet[stateName] = data.value;
-      return objSet;
+      objSet[stateName] = data.value
+      return objSet
     } else {
-      return undefined;
+      return undefined
     }
   }
 }

package/src/update.ts

@@ -1,79 +1,79 @@
-import { getModelName as getModelName2, Locale, removePhoneFormat } from "./core";
-import { useMergeState } from "./merge";
-import { buildFlatState, buildState, handleEvent, localeOf } from "./state";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react"
+import { getModelName as getModelName2, Locale, removePhoneFormat } from "./core"
+import { useMergeState } from "./merge"
+import { buildFlatState, buildState, handleEvent, localeOf } from "./state"
 
-const m = "model";
+const m = "model"
 const _getModelName = (f2?: HTMLFormElement | null): string => {
-  return getModelName2(f2, m);
-};
+  return getModelName2(f2, m)
+}
 export const useUpdate = <T>(
   initialState: T,
   getName?: ((f?: HTMLFormElement | null) => string) | string,
   getLocale?: (() => Locale) | Locale,
-  removeErr?: (ctrl: HTMLInputElement) => void
+  removeErr?: (ctrl: HTMLInputElement) => void,
 ) => {
-  const [state, setState] = useMergeState<T>(initialState);
-  const [rerender, setRerender] = useState(false);
+  const [state, setState] = useMergeState<T>(initialState)
+  const [rerender, setRerender] = useState(false)
 
   // trigger re-render page when change state in useSearch
   useEffect(() => {
-    setRerender(!rerender);
-  }, [state]);
+    setRerender(!rerender)
+  }, [state])
 
   const updatePhoneState = (event: any) => {
-    const re = /^[0-9\b]+$/;
-    const target = event.currentTarget as HTMLInputElement;
-    const value = removePhoneFormat(target.value);
+    const re = /^[0-9\b]+$/
+    const target = event.currentTarget as HTMLInputElement
+    const value = removePhoneFormat(target.value)
     if (re.test(value) || !value) {
-      updateState(event);
+      updateState(event)
     } else {
-      const splitArr = value.split("");
-      let responseStr = "";
+      const splitArr = value.split("")
+      let responseStr = ""
       splitArr.forEach((element) => {
         if (re.test(element)) {
-          responseStr += element;
+          responseStr += element
         }
-      });
-      target.value = responseStr;
-      updateState(event);
+      })
+      target.value = responseStr
+      updateState(event)
     }
-  };
-  const getModelName: (f2?: HTMLFormElement | null) => string = typeof getName === "function" ? getName : _getModelName;
+  }
+  const getModelName: (f2?: HTMLFormElement | null) => string = typeof getName === "function" ? getName : _getModelName
 
   const updateState = (e: any, callback?: (prev: any) => void, lc?: Locale) => {
-    const ctrl = e.currentTarget as HTMLInputElement;
-    let mn: string = m;
+    const ctrl = e.currentTarget as HTMLInputElement
+    let mn: string = m
     if (getName) {
       if (typeof getName === "string") {
-        mn = getName;
+        mn = getName
       } else {
-        mn = getName(ctrl.form);
+        mn = getName(ctrl.form)
       }
     } else {
-      mn = _getModelName(ctrl.form);
+      mn = _getModelName(ctrl.form)
     }
-    const l = localeOf(lc, getLocale);
-    handleEvent(e, removeErr);
-    const objSet = buildState<T, any>(e, state, ctrl, mn, l);
+    const l = localeOf(lc, getLocale)
+    handleEvent(e, removeErr)
+    const objSet = buildState<T, any>(e, state, ctrl, mn, l)
     if (objSet) {
       if (callback) {
-        setState({ ...objSet }, callback);
+        setState({ ...objSet }, callback)
       } else {
-        setState(objSet);
+        setState(objSet)
       }
     }
-  };
+  }
   const updateFlatState = (e: any, callback?: () => void, lc?: Locale) => {
-    const objSet = buildFlatState<T, any>(e, state, lc);
+    const objSet = buildFlatState<T, any>(e, state, lc)
     if (objSet) {
       if (callback) {
-        setState(objSet, callback);
+        setState(objSet, callback)
       } else {
-        setState(objSet);
+        setState(objSet)
       }
     }
-  };
+  }
   return {
     getModelName,
     updateState,
@@ -82,5 +82,5 @@ export const useUpdate = <T>(
     getLocale,
     setState,
     state,
-  };
-};
+  }
+}