react-hook-core 0.5.0 → 0.5.1

package/src/edit.ts

@@ -1,6 +1,42 @@
 import { NavigateFunction } from "react-router-dom"
 import { Attributes, ErrorMessage, StringMap } from "./core"
 
+export function isSuccessful<T>(x: number | T | ErrorMessage[]): boolean {
+  if (Array.isArray(x)) {
+    return false
+  } else if (typeof x === "object") {
+    return true
+  } else if (typeof x === "number" && x > 0) {
+    return true
+  }
+  return false
+}
+
+type Result<T> = number | T | ErrorMessage[]
+export function afterSaved<T>(
+  res: Result<T>,
+  form: HTMLFormElement | undefined | null,
+  resource: StringMap,
+  showFormError: (form?: HTMLFormElement | null, errors?: ErrorMessage[]) => ErrorMessage[],
+  alertSuccess: (msg: string, callback?: () => void) => void,
+  alertError: (msg: string) => void,
+  navigate?: NavigateFunction,
+) {
+  if (Array.isArray(res)) {
+    showFormError(form, res)
+  } else if (isSuccessful(res)) {
+    alertSuccess(resource.msg_save_success, () => {
+      if (navigate) {
+        navigate(-1)
+      }
+    })
+  } else if (res === 0) {
+    alertError(resource.error_not_found)
+  } else {
+    alertError(resource.error_conflict)
+  }
+}
+
 export function createModel<T>(attributes?: Attributes): T {
   const obj: any = {}
   if (!attributes) {
@@ -48,39 +84,3 @@ export function createModel<T>(attributes?: Attributes): T {
   }
   return obj
 }
-
-export function isSuccessful<T>(x: number | T | ErrorMessage[]): boolean {
-  if (Array.isArray(x)) {
-    return false
-  } else if (typeof x === "object") {
-    return true
-  } else if (typeof x === "number" && x > 0) {
-    return true
-  }
-  return false
-}
-
-type Result<T> = number | T | ErrorMessage[]
-export function afterSaved<T>(
-  res: Result<T>,
-  form: HTMLFormElement | undefined | null,
-  resource: StringMap,
-  showFormError: (form?: HTMLFormElement | null, errors?: ErrorMessage[]) => ErrorMessage[],
-  alertSuccess: (msg: string, callback?: () => void) => void,
-  alertError: (msg: string) => void,
-  navigate?: NavigateFunction,
-) {
-  if (Array.isArray(res)) {
-    showFormError(form, res)
-  } else if (isSuccessful(res)) {
-    alertSuccess(resource.msg_save_success, () => {
-      if (navigate) {
-        navigate(-1)
-      }
-    })
-  } else if (res === 0) {
-    alertError(resource.error_not_found)
-  } else {
-    alertError(resource.error_conflict)
-  }
-}

package/src/index.ts

@@ -4,15 +4,11 @@ export * from "./com"
 export * from "./core"
 export * from "./diff"
 export * from "./edit"
-export * from "./formutil"
 export * from "./reflect"
 export * from "./route"
 export * from "./search"
 export * from "./state"
-export * from "./update"
-export * from "./useEdit"
 export * from "./useMessage"
-export * from "./useSearch"
 export * from "./util"
 
 export type ButtonMouseEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -98,7 +94,7 @@ interface InputProps {
   defaultValue?: string
   onChangeNumber?: (value: number) => void
   onChange?: ChangeEventHandler<HTMLInputElement>
-  currencyOnBlur?: (event: Event | any, locale: Locale, currencyCode?: string, includingCurrencySymbol?: boolean) => void
+  currencyOnBlur?: (e: Event | any, locale: Locale, currencyCode?: string, includingCurrencySymbol?: boolean) => void
   currencyCode?: string
   symbol?: boolean
   readOnly?: boolean

package/src/route.ts

@@ -1,9 +1,24 @@
 import queryString from "query-string"
+import * as React from "react"
 import { NavigateFunction } from "react-router-dom"
 import { StringMap } from "./core"
 import { hasDiff } from "./reflect"
 import { Filter } from "./search"
 
+export function onBack<T>(
+  e: React.MouseEvent<HTMLElement, MouseEvent>,
+  navigate: NavigateFunction,
+  confirm: (msg: string, yesCallback?: () => void) => void,
+  resource: StringMap,
+  o1: T,
+  o2: T,
+  keys?: string[],
+  version?: string,
+) {
+  e.preventDefault()
+  goBack(navigate, confirm, resource, o1, o2, keys, version)
+}
+
 export function goBack<T>(
   navigate: NavigateFunction,
   confirm: (msg: string, yesCallback?: () => void) => void,

package/src/search.ts

@@ -374,8 +374,8 @@ export function handleToggle(target?: HTMLElement, off?: boolean): boolean {
   }
   return on
 }
-export function getNumber(event: ChangeEvent<HTMLSelectElement | HTMLInputElement>): number {
-  return parseInt(event.currentTarget.value, 10)
+export function getNumber(e: ChangeEvent<HTMLSelectElement | HTMLInputElement>): number {
+  return parseInt(e.currentTarget.value, 10)
 }
 
 export function setSortFilter<F extends Filter, T extends Sortable>(
@@ -428,13 +428,13 @@ export function onClearQ<T extends Filter>(filter: T, setFilter?: (v: React.SetS
   }
 }
 export function onPageSizeChanged<T extends Filter>(
-  event: ChangeEvent<HTMLSelectElement>,
+  e: ChangeEvent<HTMLSelectElement>,
   search: () => void,
   filter: T,
   setFilter?: (v: React.SetStateAction<T>) => void,
 ) {
   filter.page = 1
-  filter.limit = getNumber(event)
+  filter.limit = getNumber(e)
   if (setFilter) {
     setFilter(filter)
   }
@@ -450,14 +450,14 @@ export function onPageChanged<T extends Filter>(data: PageChange, search: () =>
   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
@@ -471,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, removeFaxFormat, removePhoneFormat } 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")
@@ -17,7 +16,7 @@ export function getDecimalSeparator(ele: HTMLInputElement): string {
 const r1 = / |,|\$|€|£|¥|'|٬|،| /g
 const r2 = / |\.|\$|€|£|¥|'|٬|،| /g
 export function updateNumber<T>(
-  e: ChangeEvent<HTMLInputElement, HTMLInputElement>,
+  e: ChangeEvent<HTMLInputElement>,
   o: T,
   setObj: (v: React.SetStateAction<T>) => void,
   decimalSeparator?: string,
@@ -40,7 +39,7 @@ export function updateNumber<T>(
   }
 }
 export function formatAndUpdateState<T>(
-  e: ChangeEvent<HTMLInputElement, HTMLInputElement> | ChangeEvent<HTMLTextAreaElement, HTMLTextAreaElement>,
+  e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>,
   o: T,
   setObj: (v: React.SetStateAction<T>) => void,
   formatStr?: (s?: string) => string,
@@ -49,7 +48,7 @@ export function formatAndUpdateState<T>(
   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,
@@ -128,170 +127,6 @@ export function updateState<T>(
   }
 }
 
-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()
-      } else {
-        l = glc
-      }
-    }
-    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)
-  }
-}
-
-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")
@@ -303,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

package/lib/update.js

@@ -1,143 +0,0 @@
-"use strict"
-var __assign =
-  (this && this.__assign) ||
-  function () {
-    __assign =
-      Object.assign ||
-      function (t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i]
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]
-        }
-        return t
-      }
-    return __assign.apply(this, arguments)
-  }
-Object.defineProperty(exports, "__esModule", { value: true })
-var react_1 = require("react")
-var core_1 = require("./core")
-var state_1 = require("./state")
-function getModelName(form, name) {
-  if (form) {
-    var a = form.getAttribute("model-name")
-    if (a && a.length > 0) {
-      return a
-    }
-    var b = form.name
-    if (b) {
-      if (b.endsWith("Form")) {
-        return b.substring(0, b.length - 4)
-      }
-      return b
-    }
-  }
-  if (name && name.length > 0) {
-    return name
-  }
-  return ""
-}
-exports.getModelName = getModelName
-var m = "model"
-var _getModelName = function (f2) {
-  return getModelName(f2, m)
-}
-function useMergeState(initialState) {
-  var _a = react_1.useState(initialState ? initialState : {}),
-    state = _a[0],
-    _setState = _a[1]
-  var callbackRef = react_1.useRef(null)
-  var setState = react_1.useCallback(
-    function (newState, callback) {
-      callbackRef.current = callback
-      _setState(function (prevState) {
-        return Object.assign({}, prevState, newState)
-      })
-    },
-    [state],
-  )
-  react_1.useEffect(
-    function () {
-      if (callbackRef.current) {
-        callbackRef.current(state)
-      }
-    },
-    [state],
-  )
-  return [state, setState]
-}
-exports.useMergeState = useMergeState
-exports.useUpdate = function (initialState, getName, getLocale, removeErr) {
-  var _a = useMergeState(initialState),
-    state = _a[0],
-    setState = _a[1]
-  var _b = react_1.useState(false),
-    rerender = _b[0],
-    setRerender = _b[1]
-  react_1.useEffect(
-    function () {
-      setRerender(!rerender)
-    },
-    [state],
-  )
-  var updatePhoneState = function (event) {
-    var re = /^[0-9\b]+$/
-    var target = event.currentTarget
-    var value = core_1.removePhoneFormat(target.value)
-    if (re.test(value) || !value) {
-      updateState(event)
-    } else {
-      var splitArr = value.split("")
-      var responseStr_1 = ""
-      splitArr.forEach(function (element) {
-        if (re.test(element)) {
-          responseStr_1 += element
-        }
-      })
-      target.value = responseStr_1
-      updateState(event)
-    }
-  }
-  var getModelName = typeof getName === "function" ? getName : _getModelName
-  var updateState = function (e, callback, lc) {
-    var ctrl = e.currentTarget
-    var mn = m
-    if (getName) {
-      if (typeof getName === "string") {
-        mn = getName
-      } else {
-        mn = getName(ctrl.form)
-      }
-    } else {
-      mn = _getModelName(ctrl.form)
-    }
-    var l = state_1.localeOf(lc, getLocale)
-    state_1.handleEvent(e, removeErr)
-    var objSet = state_1.buildState(e, state, ctrl, mn, l)
-    if (objSet) {
-      if (callback) {
-        setState(__assign({}, objSet), callback)
-      } else {
-        setState(objSet)
-      }
-    }
-  }
-  var updateFlatState = function (e, callback, lc) {
-    var objSet = state_1.buildFlatState(e, state, lc)
-    if (objSet) {
-      if (callback) {
-        setState(objSet, callback)
-      } else {
-        setState(objSet)
-      }
-    }
-  }
-  return {
-    getModelName: getModelName,
-    updateState: updateState,
-    updatePhoneState: updatePhoneState,
-    updateFlatState: updateFlatState,
-    getLocale: getLocale,
-    setState: setState,
-    state: state,
-  }
-}