react-hook-core 0.4.8 → 0.4.10

package/src/input.ts

@@ -81,23 +81,63 @@ export function getErrorFunc(
   }
   return (p as any).showError
 }
-/*
-export interface EditStatusParameter {
-  status?: EditStatusConfig;
-}
-export function getEditStatusFunc(p: ResourceService|EditStatusParameter, status?: EditStatusConfig): EditStatusConfig {
-  if (status) {
-    return status;
+
+export function showLoading(loading?: LoadingService | ((firstTime?: boolean) => void)): void {
+  if (loading) {
+    if (typeof loading === "function") {
+      loading()
+    } else {
+      loading.showLoading()
+    }
   }
-  return (p as any).status;
 }
-export interface DiffStatusParameter {
-  status?: DiffStatusConfig;
+export function hideLoading(loading?: LoadingService | (() => void)): void {
+  if (loading) {
+    if (typeof loading === "function") {
+      loading()
+    } else {
+      loading.hideLoading()
+    }
+  }
 }
-export function getDiffStatusFunc(p: ResourceService|DiffStatusParameter, status?: DiffStatusConfig): DiffStatusConfig {
-  if (status) {
-    return status;
+
+export function initForm(form?: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement | undefined {
+  if (form) {
+    setTimeout(() => {
+      if (initMat) {
+        initMat(form)
+      }
+      focusFirstElement(form)
+    }, 100)
+  }
+  return form
+}
+export function focusFirstElement(form: HTMLFormElement): void {
+  let i = 0
+  const len = form.length
+  for (i = 0; i < len; i++) {
+    const ctrl = form[i] as HTMLInputElement
+    if (!(ctrl.readOnly || ctrl.disabled)) {
+      let nodeName = ctrl.nodeName
+      const type = ctrl.getAttribute("type")
+      if (type) {
+        const t = type.toUpperCase()
+        if (t === "BUTTON" || t === "SUBMIT") {
+          ctrl.focus()
+        }
+        if (nodeName === "INPUT") {
+          nodeName = t
+        }
+      }
+      if (nodeName !== "BUTTON" && nodeName !== "RESET" && nodeName !== "SUBMIT" && nodeName !== "CHECKBOX" && nodeName !== "RADIO") {
+        ctrl.focus()
+        /*
+        try {
+          ctrl.setSelectionRange(0, ctrl.value.length)
+        } catch (err) {}
+         */
+        return
+      }
+    }
   }
-  return (p as any).status;
 }
-*/

package/src/reflect.ts

@@ -1,6 +1,3 @@
-import { NavigateFunction } from "react-router-dom"
-import { StringMap } from "./core"
-
 export function clone(obj: any): any {
   if (!obj) {
     return obj
@@ -39,43 +36,6 @@ export function clone(obj: any): any {
   return x
 }
 
-export function getDirectValue(obj: any, key: string): any {
-  if (obj && obj.hasOwnProperty(key)) {
-    return obj[key]
-  }
-  return null
-}
-
-export function setValue(obj: any, key: string, value: any): any {
-  let replaceKey = key.replace(/\[/g, ".[").replace(/\.\./g, ".")
-  if (replaceKey.indexOf(".") === 0) {
-    replaceKey = replaceKey.slice(1, replaceKey.length)
-  }
-  const keys = replaceKey.split(".")
-  const firstKey = keys.shift()
-  if (!firstKey) {
-    return
-  }
-  const isArrayKey = /\[([0-9]+)\]/.test(firstKey)
-  if (keys.length > 0) {
-    const firstKeyValue = obj[firstKey] || {}
-    const returnValue = setValue(firstKeyValue, keys.join("."), value)
-    return setKey(obj, isArrayKey, firstKey, returnValue)
-  }
-  return setKey(obj, isArrayKey, firstKey, value)
-}
-const setKey = (_object: any, _isArrayKey: boolean, _key: string, _nextValue: any) => {
-  if (_isArrayKey) {
-    if (_object.length > _key) {
-      _object[_key] = _nextValue
-    } else {
-      _object.push(_nextValue)
-    }
-  } else {
-    _object[_key] = _nextValue
-  }
-  return _object
-}
 export function isEmptyObject(obj: any): boolean {
   for (let key in obj) {
     if (obj.hasOwnProperty(key)) {
@@ -143,22 +103,6 @@ export function hasDiff<T>(o1: T, o2: T, keys?: string[], version?: string): boo
   return !isEmptyObject(diff)
 }
 
-export function goBack<T>(
-  navigate: NavigateFunction,
-  confirm: (msg: string, yesCallback?: () => void) => void,
-  resource: StringMap,
-  o1: T,
-  o2: T,
-  keys?: string[],
-  version?: string,
-) {
-  if (!hasDiff(o1, o2, keys, version)) {
-    navigate(-1)
-  } else {
-    confirm(resource.msg_confirm_back, () => navigate(-1))
-  }
-}
-
 export function notIn(s1: string[], s2: string[]): string[] {
   const r = []
   for (const s of s2) {
@@ -273,3 +217,41 @@ export function equalAll<T>(list: T[] | undefined | null, name: string, v: boole
   }
   return true
 }
+
+export function getDirectValue(obj: any, key: string): any {
+  if (obj && obj.hasOwnProperty(key)) {
+    return obj[key]
+  }
+  return null
+}
+
+export function setValue(obj: any, key: string, value: any): any {
+  let replaceKey = key.replace(/\[/g, ".[").replace(/\.\./g, ".")
+  if (replaceKey.indexOf(".") === 0) {
+    replaceKey = replaceKey.slice(1, replaceKey.length)
+  }
+  const keys = replaceKey.split(".")
+  const firstKey = keys.shift()
+  if (!firstKey) {
+    return
+  }
+  const isArrayKey = /\[([0-9]+)\]/.test(firstKey)
+  if (keys.length > 0) {
+    const firstKeyValue = obj[firstKey] || {}
+    const returnValue = setValue(firstKeyValue, keys.join("."), value)
+    return setKey(obj, isArrayKey, firstKey, returnValue)
+  }
+  return setKey(obj, isArrayKey, firstKey, value)
+}
+const setKey = (_object: any, _isArrayKey: boolean, _key: string, _nextValue: any) => {
+  if (_isArrayKey) {
+    if (_object.length > _key) {
+      _object[_key] = _nextValue
+    } else {
+      _object.push(_nextValue)
+    }
+  } else {
+    _object[_key] = _nextValue
+  }
+  return _object
+}

package/src/route.ts

@@ -1,6 +1,25 @@
 import * as qs from "query-string"
+import { NavigateFunction } from "react-router-dom"
+import { StringMap } from "./core"
+import { hasDiff } from "./reflect"
 import { Filter } from "./search"
 
+export function goBack<T>(
+  navigate: NavigateFunction,
+  confirm: (msg: string, yesCallback?: () => void) => void,
+  resource: StringMap,
+  o1: T,
+  o2: T,
+  keys?: string[],
+  version?: string,
+) {
+  if (!hasDiff(o1, o2, keys, version)) {
+    navigate(-1)
+  } else {
+    confirm(resource.msg_confirm_back, () => navigate(-1))
+  }
+}
+
 export function buildFromUrl<S extends Filter>(modelT?: S): S {
   return buildParameters<S>(window.location.search, modelT)
 }

package/src/search.ts

@@ -42,18 +42,8 @@ export interface Pagination {
   appendable?: boolean
 }
 
-export interface Searchable extends Pagination, Sortable {}
+interface Searchable extends Pagination, Sortable {}
 
-export function getOffset(limit: number, page?: number, firstLimit?: number): number {
-  const p = page && page > 0 ? page : 1
-  if (firstLimit && firstLimit > 0) {
-    const offset = limit * (p - 2) + firstLimit
-    return offset < 0 ? 0 : offset
-  } else {
-    const offset = limit * (p - 1)
-    return offset < 0 ? 0 : offset
-  }
-}
 export function mergeFilter<S extends Filter>(obj: S, b?: S, pageSizes?: number[], arrs?: string[] | any) {
   let a: any = b
   if (!b) {
@@ -148,21 +138,9 @@ export function initFilter<S extends Filter>(m: S, com: Searchable): S {
       com.sortType = ""
     }
   }
-  /*
-  delete m.page;
-  delete m.limit;
-  delete m.firstLimit;
-  */
   return m
 }
 
-export function showPaging<T>(com: Pagination, list: T[], pageSize?: number, total?: number): void {
-  com.total = total
-  const pageTotal = getPageTotal(pageSize, total)
-  com.pages = pageTotal
-  com.showPaging = !total || com.pages <= 1 || (list && list.length >= total) ? false : true
-}
-
 export function getFields(form?: HTMLFormElement, arr?: string[]): string[] | undefined {
   if (arr && arr.length > 0) {
     return arr
@@ -215,7 +193,6 @@ export function getPageTotal(pageSize?: number, total?: number): number {
     return Math.floor(total / pageSize + 1)
   }
 }
-
 export function formatText(...args: any[]): string {
   let formatted = args[0]
   if (!formatted || formatted === "") {
@@ -393,15 +370,6 @@ export function handleToggle(target?: HTMLElement, on?: boolean): boolean {
   }
   return off
 }
-export function handleSortEvent(event: Event, com: Sortable): void {
-  if (event && event.target) {
-    const target = event.target as HTMLElement
-    const s = handleSort(target, com.sortTarget, com.sortField, com.sortType)
-    com.sortField = s.field
-    com.sortType = s.type
-    com.sortTarget = target
-  }
-}
 
 export function getSortElement(target: HTMLElement): HTMLElement {
   return target.nodeName === "I" ? (target.parentElement as HTMLElement) : target
@@ -473,3 +441,14 @@ export function toggleSortStyle(target: HTMLElement): string {
   }
   return field
 }
+
+export function getOffset(limit: number, page?: number, firstLimit?: number): number {
+  const p = page && page > 0 ? page : 1
+  if (firstLimit && firstLimit > 0) {
+    const offset = limit * (p - 2) + firstLimit
+    return offset < 0 ? 0 : offset
+  } else {
+    const offset = limit * (p - 1)
+    return offset < 0 ? 0 : offset
+  }
+}

package/src/update.ts

@@ -1,12 +1,64 @@
-import { useEffect, useState } from "react"
-import { getModelName as getModelName2, Locale, removePhoneFormat } from "./core"
-import { useMergeState } from "./merge"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Locale, resources } from "./core"
 import { buildFlatState, buildState, handleEvent, localeOf } from "./state"
 
+export function removePhoneFormat(phone: string): string {
+  if (phone) {
+    return phone.replace(resources.phone, "")
+  } else {
+    return phone
+  }
+}
+
+export function getModelName(form?: HTMLFormElement | null, name?: string): string {
+  if (form) {
+    const a = form.getAttribute("model-name")
+    if (a && a.length > 0) {
+      return a
+    }
+    const 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 ""
+}
 const m = "model"
 const _getModelName = (f2?: HTMLFormElement | null): string => {
-  return getModelName2(f2, m)
+  return getModelName(f2, m)
+}
+
+export type Callback<T> = (value?: T) => void
+export type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void
+
+export function useMergeState<T>(initialState?: T | (() => T)): [T, DispatchWithCallback<Partial<T>>] {
+  const [state, _setState] = useState(initialState ? initialState : ({} as any))
+
+  const callbackRef = useRef<Callback<T>>()
+
+  const setState = useCallback(
+    (newState: Partial<T>, callback?: Callback<T>): void => {
+      callbackRef.current = callback
+      _setState((prevState: any) => Object.assign({}, prevState, newState))
+    },
+    [state],
+  )
+
+  useEffect(() => {
+    if (callbackRef.current) {
+      callbackRef.current(state)
+    }
+  }, [state])
+
+  return [state, setState]
 }
+
 export const useUpdate = <T>(
   initialState: T,
   getName?: ((f?: HTMLFormElement | null) => string) | string,

package/src/useEdit.ts

@@ -1,26 +1,13 @@
 import { useEffect, useState } from "react"
 import { Params, useNavigate, useParams } from "react-router"
-import {
-  Attribute,
-  Attributes,
-  ErrorMessage,
-  getModelName as getModelName2,
-  hideLoading,
-  initForm,
-  LoadingService,
-  Locale,
-  resources,
-  ResourceService,
-  showLoading,
-  UIService,
-} from "./core"
+import { messageByHttpStatus } from "./common"
+import { Attribute, Attributes, ErrorMessage, LoadingService, Locale, resources, ResourceService, UIService } from "./core"
 import { createModel as createModel2 } from "./edit"
-import { message, messageByHttpStatus } from "./error"
 import { focusFirstError, setReadOnly } from "./formutil"
-import { DispatchWithCallback, useMergeState } from "./merge"
+import { hideLoading, initForm, showLoading } from "./input"
 import { clone, makeDiff } from "./reflect"
 import { localeOf } from "./state"
-import { useUpdate } from "./update"
+import { DispatchWithCallback, getModelName as getModelName2, useMergeState, useUpdate } from "./update"
 
 export function buildKeys(attributes: Attributes): string[] {
   if (!attributes) {
@@ -349,11 +336,11 @@ export const useCoreEdit = <T, ID, S, P>(
   }
 
   const _handleNotFound = (form?: any): void => {
-    const msg = message(p1.resource.value, "error_404", "error")
     if (form) {
       setReadOnly(form)
     }
-    p1.showError(msg.message, () => window.history.back, msg.title)
+    const resource = p1.resource.resource()
+    p1.showError(resource.error_404, () => window.history.back, resource.error)
   }
   const handleNotFound = p && p.handleNotFound ? p.handleNotFound : _handleNotFound
 
@@ -380,15 +367,15 @@ export const useCoreEdit = <T, ID, S, P>(
       if (objKeys.length === 0) {
         navigate(-1)
       } else {
-        const msg = message(p1.resource.value, "msg_confirm_back", "confirm", "yes", "no")
+        const resource = p1.resource.resource()
         p1.confirm(
-          msg.message,
+          resource.msg_confirm_back,
           () => {
             navigate(-1)
           },
-          msg.title,
-          msg.no,
-          msg.yes,
+          resource.confirm,
+          resource.no,
+          resource.yes,
         )
       }
     }
@@ -418,13 +405,12 @@ export const useCoreEdit = <T, ID, S, P>(
   }
 
   const _onSave = (isBack?: boolean) => {
+    const resource = p1.resource.resource()
     if (p && p.readOnly) {
       if (flag.newMode === true) {
-        const m = message(p1.resource.value, "error_permission_add", "error_permission")
-        p1.showError(m.message, undefined, m.title)
+        p1.showError(resource.error_permission_add, undefined, resource.error_permission)
       } else {
-        const msg = message(p1.resource.value, "error_permission_edit", "error_permission")
-        p1.showError(msg.message, undefined, msg.title)
+        p1.showError(resource.error_permission_edit, undefined, resource.error_permission)
       }
     } else {
       if (running === true) {
@@ -441,15 +427,14 @@ export const useCoreEdit = <T, ID, S, P>(
       }
       if (flag.newMode) {
         validate(obj, () => {
-          const msg = message(p1.resource.value, "msg_confirm_save", "confirm", "yes", "no")
           p1.confirm(
-            msg.message,
+            resource.msg_confirm_save,
             () => {
               doSave(obj, undefined, version, isBack)
             },
-            msg.title,
-            msg.no,
-            msg.yes,
+            resource.confirm,
+            resource.no,
+            resource.yes,
           )
         })
       } else {
@@ -459,15 +444,14 @@ export const useCoreEdit = <T, ID, S, P>(
           p1.showMessage(p1.resource.value("msg_no_change"))
         } else {
           validate(obj, () => {
-            const msg = message(p1.resource.value, "msg_confirm_save", "confirm", "yes", "no")
             p1.confirm(
-              msg.message,
+              resource.msg_confirm_save,
               () => {
                 doSave(obj, diffObj as any, version, isBack)
               },
-              msg.title,
-              msg.no,
-              msg.yes,
+              resource.confirm,
+              resource.no,
+              resource.yes,
             )
           })
         }
@@ -596,8 +580,8 @@ export const useCoreEdit = <T, ID, S, P>(
   const postSave = p && p.postSave ? p.postSave : _postSave
 
   const _handleDuplicateKey = (result?: T) => {
-    const msg = message(p1.resource.value, "error_duplicate_key", "error")
-    p1.showError(msg.message, undefined, msg.title)
+    const resource = p1.resource.resource()
+    p1.showError(resource.error_duplicate_key, undefined, resource.error)
   }
   const handleDuplicateKey = p && p.handleDuplicateKey ? p.handleDuplicateKey : _handleDuplicateKey
 
@@ -653,9 +637,9 @@ export const useCoreEdit = <T, ID, S, P>(
         })
         .catch((err: any) => {
           const data = err && err.response ? err.response : err
-          const r = p1.resource
-          const title = r.value("error")
-          let msg = r.value("error_internal")
+          const resource = p1.resource.resource()
+          const title = resource.error
+          let msg = resource.error_internal
           if (data && data.status === 422) {
             fail(err.response?.data)
             const obj = err.response?.data?.value
@@ -667,7 +651,7 @@ export const useCoreEdit = <T, ID, S, P>(
               handleNotFound(refForm.current)
             } else {
               if (data.status && !isNaN(data.status)) {
-                msg = messageByHttpStatus(data.status, r.value)
+                msg = messageByHttpStatus(data.status, resource)
               }
               if (data && (data.status === 401 || data.status === 403)) {
                 setReadOnly(refForm.current)

package/src/useSearch.ts

@@ -1,20 +1,7 @@
 import { useEffect, useState } from "react"
-import {
-  getName,
-  getRemoveError,
-  getValidateForm,
-  hideLoading,
-  initForm,
-  LoadingService,
-  Locale,
-  pageSizes,
-  removeFormError,
-  resources,
-  ResourceService,
-  showLoading,
-  UIService,
-} from "./core"
-import { error } from "./error"
+import { error } from "./common"
+import { LoadingService, Locale, pageSizes, resources, ResourceService, UIService } from "./core"
+import { hideLoading, initForm, showLoading } from "./input"
 import { DispatchWithCallback, useMergeState } from "./merge"
 import { clone } from "./reflect"
 import { buildFromUrl } from "./route"
@@ -23,6 +10,7 @@ import {
   buildMessage,
   Filter,
   getFields,
+  getPageTotal,
   handleSort,
   handleToggle,
   initFilter,
@@ -32,13 +20,19 @@ import {
   removeSortStatus,
   SearchResult,
   SearchService,
-  showPaging,
   Sortable,
 } from "./search"
 import { enLocale } from "./state"
 import { useUpdate } from "./update"
 
-export interface Searchable extends Pagination, Sortable {
+export function showPaging<T>(com: Pagination, list: T[], pageSize?: number, total?: number): void {
+  com.total = total
+  const pageTotal = getPageTotal(pageSize, total)
+  com.pages = pageTotal
+  com.showPaging = !total || com.pages <= 1 || (list && list.length >= total) ? false : true
+}
+
+interface Searchable extends Pagination, Sortable {
   nextPageToken?: string
   excluding?: string[] | number[]
 }
@@ -52,6 +46,30 @@ export interface SearchParameter {
   auto?: boolean
 }
 
+export interface UIParameter {
+  ui?: UIService
+}
+export function removeFormError(u?: UIParameter, f?: HTMLFormElement): void {
+  if (f && u && u.ui) {
+    u.ui.removeFormError(f)
+  }
+}
+export function getValidateForm(
+  u?: UIParameter,
+  vf?: (form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean,
+): ((form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean) | undefined {
+  if (vf) {
+    return vf
+  }
+  return u && u.ui ? u.ui.validateForm : undefined
+}
+export function getRemoveError(u?: UIParameter, rmErr?: (el: HTMLInputElement) => void): ((el: HTMLInputElement) => void) | undefined {
+  if (rmErr) {
+    return rmErr
+  }
+  return u && u.ui ? u.ui.removeError : undefined
+}
+
 export function getModel<S extends Filter>(state: any, modelName: string, searchable: Searchable, fields?: string[], excluding?: string[] | number[]): S {
   let obj2 = getModelFromState(state, modelName)
 
@@ -122,6 +140,7 @@ export function getFieldsFromForm(fields?: string[], initFields?: boolean, form?
   }
   return fields
 }
+
 export function append<T>(list?: T[], results?: T[]): T[] {
   if (list && results) {
     for (const obj of results) {
@@ -425,6 +444,10 @@ export const useSearchOneProps = <T, S extends Filter, ST extends SearchComponen
 export const useSearchOne = <T, S extends Filter, ST extends SearchComponentState<T, S>>(p: HookBaseSearchParameter<T, S, ST>) => {
   return useCoreSearch(p.refForm, p.initialState, p.service, p, p)
 }
+
+export function getName(d: string, n?: string): string {
+  return n && n.length > 0 ? n : d
+}
 export const useCoreSearch = <T, S extends Filter, ST>(
   refForm: any,
   initialState: ST,
@@ -633,7 +656,8 @@ export const useCoreSearch = <T, S extends Filter, ST>(
 
   const searchError = (err: any): void => {
     setComponent({ page: component.tmpPageIndex })
-    error(err, p1.resource.value, p1.showError)
+    const resource = p1.resource.resource()
+    error(err, resource, p1.showError)
     hideLoading(p1.loading)
   }
   const appendList = p && p.appendList ? p.appendList : appendListOfState

package/src/util.ts

@@ -77,7 +77,7 @@ function getStringCurrency(value: string, datatype: string, locale?: Locale, max
 
   const dotPosition = value.indexOf(".")
   // Format thousands
-  let beforeDot = dotPosition >= 0 ? value.substr(0, dotPosition) : value
+  let beforeDot = dotPosition >= 0 ? value.substring(0, dotPosition) : value
   if (datatype === "string-currency" || isOnBlur) {
     beforeDot = beforeDot.replace(new RegExp("\\B(?=(\\d{" + groupDigits + "})+(?!\\d))", "g"), groupSeparator)
   }
@@ -85,9 +85,9 @@ function getStringCurrency(value: string, datatype: string, locale?: Locale, max
   // Cut after dot
   let afterDot
   if (dotPosition > 0) {
-    afterDot = value.substr(dotPosition + 1)
+    afterDot = value.substring(dotPosition + 1)
     if (afterDot.length > decimalDigits) {
-      afterDot = afterDot.substr(0, decimalDigits)
+      afterDot = afterDot.substring(0, decimalDigits)
     }
   }
   if (maxLength && beforeDot.length > maxLength - (decimalDigits + 1)) {