react-hook-core 0.4.23 → 0.5.1

package/src/search.ts

@@ -1,6 +1,7 @@
 import { ChangeEvent } from "react"
 import { resources, StringMap } from "./core"
 import { clone } from "./reflect"
+import { updateState } from "./state"
 
 export interface PageChange {
   page: number // currentPage
@@ -352,14 +353,16 @@ export function buildSortFilter<S extends Filter>(obj: S, sortable: Sortable): S
   const filter: any = clone(obj)
   if (sortable.sortField && sortable.sortField.length > 0) {
     filter.sort = sortable.sortType === "-" ? "-" + sortable.sortField : sortable.sortField
+    obj.sort = filter.sort
   } else {
     delete filter.sort
+    delete obj.sort
   }
   delete filter.fields
   return filter
 }
-export function handleToggle(target?: HTMLElement, on?: boolean): boolean {
-  const off = !on
+export function handleToggle(target?: HTMLElement, off?: boolean): boolean {
+  const on = !off
   if (target) {
     if (on) {
       if (!target.classList.contains("on")) {
@@ -369,43 +372,92 @@ export function handleToggle(target?: HTMLElement, on?: boolean): boolean {
       target.classList.remove("on")
     }
   }
-  return off
+  return on
+}
+export function getNumber(e: ChangeEvent<HTMLSelectElement | HTMLInputElement>): number {
+  return parseInt(e.currentTarget.value, 10)
 }
 
-export function getNumber(event: ChangeEvent<HTMLSelectElement | HTMLInputElement>): number {
-  return parseInt(event.currentTarget.value, 10)
+export function setSortFilter<F extends Filter, T extends Sortable>(
+  state: T,
+  filter: F,
+  setState?: (v: React.SetStateAction<T>) => void,
+  setFilter?: (v: React.SetStateAction<F>) => void,
+  search?: (first?: boolean) => void,
+) {
+  setSort(state, filter.sort)
+  if (setFilter) {
+    setFilter(filter)
+  }
+  if (setState) {
+    setState(state)
+  }
+  if (search) {
+    search(true)
+  }
+}
+export function onToggleSearch(
+  e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  showFilter: boolean,
+  setShowFilter?: (v: React.SetStateAction<boolean>) => void,
+) {
+  const toggleFilter = handleToggle(e.target as HTMLElement, showFilter)
+  if (setShowFilter) {
+    setShowFilter(toggleFilter)
+  }
+}
+export function resetSearch<T extends Filter>(
+  e: ChangeEvent<HTMLInputElement, HTMLInputElement>,
+  filter: T,
+  setFilter: (v: React.SetStateAction<T>) => void,
+  search?: () => void,
+) {
+  filter.page = 1
+  updateState(e, filter, setFilter)
+  if (search) {
+    search()
+  }
+}
+export function onClearQ<T extends Filter>(filter: T, setFilter?: (v: React.SetStateAction<T>) => void, search?: () => void) {
+  filter.q = ""
+  if (setFilter) {
+    setFilter({ ...filter })
+  }
+  if (search) {
+    search()
+  }
 }
 export function onPageSizeChanged<T extends Filter>(
-  event: ChangeEvent<HTMLSelectElement>,
+  e: ChangeEvent<HTMLSelectElement>,
   search: () => void,
   filter: T,
-  setState?: (v: React.SetStateAction<T>) => void,
+  setFilter?: (v: React.SetStateAction<T>) => void,
 ) {
   filter.page = 1
-  filter.limit = getNumber(event)
-  if (setState) {
-    setState(filter)
+  filter.limit = getNumber(e)
+  if (setFilter) {
+    setFilter(filter)
   }
   search()
 }
-export function onPageChanged<T extends Filter>(data: PageChange, search: () => void, filter: T, setState?: (v: React.SetStateAction<T>) => void) {
+export function onPageChanged<T extends Filter>(data: PageChange, search: () => void, filter: T, setFilter?: (v: React.SetStateAction<T>) => void) {
   const { page, size } = data
   filter.page = page
   filter.limit = size
-  if (setState) {
-    setState(filter)
+  if (setFilter) {
+    setFilter(filter)
   }
   search()
 }
 export function onSearch<F extends Filter, T extends Sortable>(
-  event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   search: () => void,
   filter: F,
   state: T,
   setFilter?: (v: React.SetStateAction<F>) => void,
   setState?: (v: React.SetStateAction<T>) => void,
 ): void {
-  event.preventDefault()
+  e.preventDefault()
   removeSortStatus(state.sortTarget)
   filter.page = 1
   state.sortTarget = undefined
@@ -419,12 +471,12 @@ export function onSearch<F extends Filter, T extends Sortable>(
   search()
 }
 export function onSort<T extends Sortable>(
-  event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   search: () => void,
   state: T,
   setState?: (v: React.SetStateAction<T>) => void,
 ) {
-  const target = getSortElement(event.target as HTMLElement)
+  const target = getSortElement(e.target as HTMLElement)
   const sort = handleSort(target, state.sortTarget, state.sortField, state.sortType)
   state.sortField = sort.field
   state.sortType = sort.type

package/src/state.ts

@@ -1,7 +1,6 @@
 import { ChangeEvent } from "react"
-import { Locale } from "./core"
+import { removeFaxFormat, removePhoneFormat } from "./core"
 import { setValue } from "./reflect"
-import { valueOf } from "./util"
 
 export function getDecimalSeparator(ele: HTMLInputElement): string {
   let separator = ele.getAttribute("data-decimal-separator")
@@ -16,45 +15,69 @@ export function getDecimalSeparator(ele: HTMLInputElement): string {
 
 const r1 = / |,|\$|€|£|¥|'|٬|،| /g
 const r2 = / |\.|\$|€|£|¥|'|٬|،| /g
+export function updateNumber<T>(
+  e: ChangeEvent<HTMLInputElement>,
+  o: T,
+  setObj: (v: React.SetStateAction<T>) => void,
+  decimalSeparator?: string,
+  callback?: () => void,
+  formatStr?: (s?: string) => string,
+) {
+  const ctrl = e.target
+  const v0: string = formatStr ? formatStr(ctrl.value) : ctrl.value
+  const dataField = ctrl.getAttribute("data-field")
+  const field = dataField ? dataField : ctrl.name
+  let v = decimalSeparator === "," ? v0.replace(r2, "") : v0.replace(r1, "")
+  if (v.indexOf(",") >= 0) {
+    v = v.replace(",", ".")
+  }
+  const val = isNaN(v as any) ? undefined : parseInt(v)
+  setValue(o, field, val)
+  setObj({ ...o })
+  if (callback) {
+    callback()
+  }
+}
+export function formatAndUpdateState<T>(
+  e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>,
+  o: T,
+  setObj: (v: React.SetStateAction<T>) => void,
+  formatStr?: (s?: string) => string,
+  callback?: () => void,
+) {
+  updateState(e, o, setObj, callback, formatStr)
+}
 export function updateState<T>(
-  e: ChangeEvent<HTMLInputElement, HTMLInputElement> | ChangeEvent<HTMLTextAreaElement, HTMLTextAreaElement>,
+  e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>,
   o: T,
   setObj: (v: React.SetStateAction<T>) => void,
+  callback?: () => void,
+  formatStr?: (s?: string) => string,
 ) {
   const ctrl = e.target
+  const v0: string = formatStr ? formatStr(ctrl.value) : ctrl.value
   const dataField = ctrl.getAttribute("data-field")
   const field = dataField ? dataField : ctrl.name
   if (ctrl.tagName === "SELECT") {
     if (ctrl.tagName === "SELECT") {
-      if (ctrl.value === "" || !ctrl.value) {
+      if (v0 === "" || !v0) {
         ctrl.removeAttribute("data-value")
       } else {
-        ctrl.setAttribute("data-value", "data-value")
+        ctrl.setAttribute("data-value", v0)
       }
     }
-    setValue(o, field, ctrl.value)
+    setValue(o, field, v0)
   } else {
     let stype = ctrl.getAttribute("type")
     const type: string = stype ? stype.toLowerCase() : "text"
     let model: any = o
-    if (type === "text") {
-      const datatype = ctrl.getAttribute("data-type")
-      if (datatype === "number" || datatype === "integer") {
-        const decimalSeparator = getDecimalSeparator(ctrl as HTMLInputElement)
-        const v0: string = ctrl.value
-        const v = decimalSeparator === "," ? v0.replace(r2, "") : v0.replace(r1, "")
-        const val = isNaN(v as any) ? undefined : parseFloat(v)
-        setValue(o, field, val)
-      } else {
-        setValue(o, field, ctrl.value)
-      }
-    } else if (type === "checkbox") {
+    if (type === "checkbox") {
       let value = model[field]
       if (ctrl.id && ctrl.name !== ctrl.id) {
         if (!value || !Array.isArray(value)) {
           value = []
         }
-        value.includes(ctrl.value) ? (value = value.filter((v: string) => v !== ctrl.value)) : value.push(ctrl.value)
+        value.includes(v0) ? (value = value.filter((v: string) => v !== v0)) : value.push(v0)
         model[field] = value
       } else {
         const v = valueOfCheckbox(ctrl as HTMLInputElement)
@@ -62,197 +85,48 @@ export function updateState<T>(
       }
     } else if (type === "radio") {
       if (field.indexOf(".") < 0 && field.indexOf("[") < 0) {
-        model[field] = ctrl.value
+        model[field] = v0
       } else {
-        setValue(model, field, ctrl.value)
+        setValue(model, field, v0)
       }
     } else if (type === "date" || type === "datetime-local") {
-      try {
-        const selectedDate = new Date(ctrl.value)
-        setValue(model, field, ctrl.value && ctrl.value !== "" ? selectedDate.toISOString() : null)
-      } catch (error) {
-        console.error("Error occurred while formatting date:", error)
-      }
+      const date = new Date(v0)
+      const val = !isNaN(date.getTime()) ? date.toISOString() : null
+      setValue(model, field, val)
     } else if (type === "time") {
-      const objSet: any = {}
-      try {
-        const selectedDate = new Date(ctrl.value)
-        setValue(model, field, selectedDate.getTime())
-      } catch (error) {
-        console.error("Error occurred while formatting time:", error)
+      const date = new Date(v0)
+      if (!isNaN(date.getTime())) {
+        setValue(model, field, date.getTime())
+      } else {
+        setValue(model, field, null)
       }
-      return objSet
     } else {
-      setValue(o, field, ctrl.value)
-    }
-  }
-  setObj({ ...o })
-}
-
-export const enLocale = {
-  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
-  if (!l) {
-    if (glc) {
-      if (typeof glc === "function") {
-        l = glc()
+      const datatype = ctrl.getAttribute("data-type")
+      if (datatype === "phone") {
+        const val = removePhoneFormat(v0)
+        setValue(o, field, val)
+      } else if (datatype === "fax") {
+        const val = removeFaxFormat(v0)
+        setValue(o, field, val)
+      } else if (datatype === "number" || datatype === "int") {
+        const decimalSeparator = getDecimalSeparator(ctrl as HTMLInputElement)
+        let v = decimalSeparator === "," ? v0.replace(r2, "") : v0.replace(r1, "")
+        if (v.indexOf(",") >= 0) {
+          v = v.replace(",", ".")
+        }
+        const val = isNaN(v as any) ? undefined : parseFloat(v)
+        setValue(o, field, val)
       } else {
-        l = glc
+        setValue(o, field, v0)
       }
     }
-    if (!l) {
-      l = enLocale
-    }
   }
-  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)
-  if (isPreventDefault) {
-    e.preventDefault()
-  }
-  if (removeErr && ctrl.nodeName === "SELECT" && ctrl.value && ctrl.classList.contains("invalid")) {
-    removeErr(ctrl)
+  setObj({ ...o })
+  if (callback) {
+    callback()
   }
 }
 
-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)
-    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
-      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 } })
-        } else {
-          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
-  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 (ctrl.id && ctrl.name !== ctrl.id) {
-          if (!value || !Array.isArray(value)) {
-            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
-          // console.log(model,  modelName, model, model[field], field, value )
-          // setValue(model, field, value);
-        } else {
-          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
-        } else {
-          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 = {}
-        try {
-          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)
-        }
-        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")
-          }
-        }
-        const data = valueOf(ctrl, tloc, e.type)
-        if (data.mustChange) {
-          if (field.indexOf(".") < 0 && field.indexOf("[") < 0) {
-            model[field] = data.value
-          } else {
-            setValue(model, field, data.value)
-          }
-          const objSet: any = {}
-          objSet[modelName] = model
-          return objSet
-        }
-      }
-    } else {
-      return buildFlatState(e, state, tloc)
-    }
-  } else {
-    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")
@@ -264,29 +138,3 @@ export function valueOfCheckbox(ctrl: HTMLInputElement): string | number | boole
     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") {
-    if (ctrl.id && stateName === ctrl.id) {
-      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
-    }
-  } else {
-    const data = valueOf(ctrl, l, e.type)
-    if (data.mustChange) {
-      objSet[stateName] = data.value
-      return objSet
-    } else {
-      return undefined
-    }
-  }
-}

package/src/util.ts

@@ -1,5 +1,17 @@
-import { Locale } from "./core"
-import { enLocale } from "./state"
+import { Locale } from "./core";
+
+export const enLocale = {
+  id: "en-US",
+  countryCode: "US",
+  dateFormat: "M/d/yyyy",
+  firstDayOfWeek: 1,
+  decimalSeparator: ".",
+  groupSeparator: ",",
+  decimalDigits: 2,
+  currencyCode: "USD",
+  currencySymbol: "$",
+  currencyPattern: 0,
+}
 
 const r1 = / |,|\$|€|£|¥|'|٬|،| /g
 const r2 = / |\.|\$|€|£|¥|'|٬|،| /g

package/lib/formutil.js

@@ -1,76 +0,0 @@
-"use strict"
-Object.defineProperty(exports, "__esModule", { value: true })
-function setReadOnly(form) {
-  var args = []
-  for (var _i = 1; _i < arguments.length; _i++) {
-    args[_i - 1] = arguments[_i]
-  }
-  if (!form) {
-    return
-  }
-  var len = form.length
-  for (var i = 0; i < len; i++) {
-    var ctrl = form[i]
-    var name_1 = ctrl.getAttribute("name")
-    var skip = false
-    if (name_1 != null && name_1.length > 0 && name_1 !== "btnBack") {
-      if (arguments.length > 1) {
-        for (var j = 1; j < arguments.length; j++) {
-          if (arguments[j] === name_1) {
-            skip = true
-          }
-        }
-      }
-      if (skip === false) {
-        var nodeName = ctrl.nodeName
-        var type = ctrl.getAttribute("type")
-        if (nodeName === "INPUT" && type !== null) {
-          nodeName = type.toUpperCase()
-        }
-        if (nodeName !== "BUTTON" && nodeName !== "RESET" && nodeName !== "SUBMIT" && nodeName !== "SELECT") {
-          switch (type) {
-            case "checkbox":
-              ctrl.disabled = true
-              break
-            case "radio":
-              ctrl.disabled = true
-              break
-            default:
-              ctrl.readOnly = true
-          }
-        } else {
-          ctrl.disabled = true
-        }
-      }
-    }
-  }
-}
-exports.setReadOnly = setReadOnly
-function focusFirstError(form, className) {
-  if (!form) {
-    return
-  }
-  var len = form.length
-  if (className && className.length > 0) {
-    for (var i = 0; i < len; i++) {
-      var ctrl = form[i]
-      var parent_1 = ctrl.parentElement
-      if (ctrl.classList.contains(className) || (parent_1 && parent_1.classList.contains(className))) {
-        ctrl.focus()
-        ctrl.scrollIntoView()
-        return
-      }
-    }
-  } else {
-    for (var i = 0; i < len; i++) {
-      var ctrl = form[i]
-      var parent_2 = ctrl.parentElement
-      if (ctrl.classList.contains("invalid") || ctrl.classList.contains(".ng-invalid") || (parent_2 && parent_2.classList.contains("invalid"))) {
-        ctrl.focus()
-        ctrl.scrollIntoView()
-        return
-      }
-    }
-  }
-}
-exports.focusFirstError = focusFirstError