react-hook-core 0.4.8 → 0.4.10

package/lib/useEdit.js

@@ -16,11 +16,11 @@ var __assign =
 Object.defineProperty(exports, "__esModule", { value: true })
 var react_1 = require("react")
 var react_router_1 = require("react-router")
+var common_1 = require("./common")
 var core_1 = require("./core")
 var edit_1 = require("./edit")
-var error_1 = require("./error")
 var formutil_1 = require("./formutil")
-var merge_1 = require("./merge")
+var input_1 = require("./input")
 var reflect_1 = require("./reflect")
 var state_1 = require("./state")
 var update_1 = require("./update")
@@ -119,7 +119,7 @@ exports.useEdit = function (refForm, initialState, service, p2, p) {
   react_1.useEffect(function () {
     if (refForm) {
       var registerEvents = p2.ui ? p2.ui.registerEvents : undefined
-      core_1.initForm(baseProps.refForm.current, registerEvents)
+      input_1.initForm(baseProps.refForm.current, registerEvents)
     }
     var n = baseProps.getModelName(refForm.current)
     var obj = {}
@@ -144,7 +144,7 @@ exports.useEdit = function (refForm, initialState, service, p2, p) {
         baseProps.load(id, p ? p.callback : undefined)
       } catch (error) {
         p2.showError(error)
-        core_1.hideLoading(p2.loading)
+        input_1.hideLoading(p2.loading)
       }
     }
   }, [])
@@ -156,7 +156,7 @@ exports.useEditProps = function (props, refForm, initialState, service, p2, p) {
   react_1.useEffect(function () {
     if (refForm) {
       var registerEvents = p2.ui ? p2.ui.registerEvents : undefined
-      core_1.initForm(baseProps.refForm.current, registerEvents)
+      input_1.initForm(baseProps.refForm.current, registerEvents)
     }
     var n = baseProps.getModelName(refForm.current)
     var obj = {}
@@ -197,12 +197,12 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
     if (p && p.name && p.name.length > 0) {
       return p.name
     }
-    return core_1.getModelName(f)
+    return update_1.getModelName(f)
   }
   var baseProps = update_1.useUpdate(initialState, getModelName, p1.getLocale)
   var state = baseProps.state,
     setState = baseProps.setState
-  var _b = merge_1.useMergeState({
+  var _b = update_1.useMergeState({
       newMode: false,
       setBack: false,
       readOnly: p ? p.readOnly : undefined,
@@ -225,16 +225,16 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
     showModel(model)
   }
   var _handleNotFound = function (form) {
-    var msg = error_1.message(p1.resource.value, "error_404", "error")
     if (form) {
       formutil_1.setReadOnly(form)
     }
+    var resource = p1.resource.resource()
     p1.showError(
-      msg.message,
+      resource.error_404,
       function () {
         return window.history.back
       },
-      msg.title,
+      resource.error,
     )
   }
   var handleNotFound = p && p.handleNotFound ? p.handleNotFound : _handleNotFound
@@ -260,15 +260,15 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
       if (objKeys.length === 0) {
         navigate(-1)
       } else {
-        var msg = error_1.message(p1.resource.value, "msg_confirm_back", "confirm", "yes", "no")
+        var resource = p1.resource.resource()
         p1.confirm(
-          msg.message,
+          resource.msg_confirm_back,
           function () {
             navigate(-1)
           },
-          msg.title,
-          msg.no,
-          msg.yes,
+          resource.confirm,
+          resource.no,
+          resource.yes,
         )
       }
     }
@@ -296,13 +296,12 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
     }
   }
   var _onSave = function (isBack) {
+    var resource = p1.resource.resource()
     if (p && p.readOnly) {
       if (flag.newMode === true) {
-        var m = error_1.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 {
-        var msg = error_1.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) {
@@ -319,15 +318,14 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
       }
       if (flag.newMode) {
         validate(obj_1, function () {
-          var msg = error_1.message(p1.resource.value, "msg_confirm_save", "confirm", "yes", "no")
           p1.confirm(
-            msg.message,
+            resource.msg_confirm_save,
             function () {
               doSave(obj_1, undefined, version_1, isBack)
             },
-            msg.title,
-            msg.no,
-            msg.yes,
+            resource.confirm,
+            resource.no,
+            resource.yes,
           )
         })
       } else {
@@ -337,15 +335,14 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
           p1.showMessage(p1.resource.value("msg_no_change"))
         } else {
           validate(obj_1, function () {
-            var msg = error_1.message(p1.resource.value, "msg_confirm_save", "confirm", "yes", "no")
             p1.confirm(
-              msg.message,
+              resource.msg_confirm_save,
               function () {
                 doSave(obj_1, diffObj_1, version_1, isBack)
               },
-              msg.title,
-              msg.no,
-              msg.yes,
+              resource.confirm,
+              resource.no,
+              resource.yes,
             )
           })
         }
@@ -414,7 +411,7 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
   var _handleError = function (err) {
     if (err) {
       setRunning(false)
-      core_1.hideLoading(p1.loading)
+      input_1.hideLoading(p1.loading)
       var errHeader = p1.resource.value("error")
       var errMsg = p1.resource.value("error_internal")
       var data = err && err.response ? err.response : err
@@ -429,7 +426,7 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
   var handleError = p && p.handleError ? p.handleError : _handleError
   var _postSave = function (r, origin, version, isPatch, backOnSave) {
     setRunning(false)
-    core_1.hideLoading(p1.loading)
+    input_1.hideLoading(p1.loading)
     var x = r
     var successMsg = p1.resource.value("msg_save_success")
     var newMod = flag.newMode
@@ -467,13 +464,13 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
   }
   var postSave = p && p.postSave ? p.postSave : _postSave
   var _handleDuplicateKey = function (result) {
-    var msg = error_1.message(p1.resource.value, "error_duplicate_key", "error")
-    p1.showError(msg.message, undefined, msg.title)
+    var resource = p1.resource.resource()
+    p1.showError(resource.error_duplicate_key, undefined, resource.error)
   }
   var handleDuplicateKey = p && p.handleDuplicateKey ? p.handleDuplicateKey : _handleDuplicateKey
   var _doSave = function (obj, body, version, isBack) {
     setRunning(true)
-    core_1.showLoading(p1.loading)
+    input_1.showLoading(p1.loading)
     var isBackO = isBack != null && isBack !== undefined ? isBack : false
     var patchable = p ? p.patchable : true
     if (flag.newMode === false) {
@@ -506,7 +503,7 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
     var id = _id
     if (id != null && id !== "") {
       setRunning(true)
-      core_1.showLoading(p1.loading)
+      input_1.showLoading(p1.loading)
       service
         .load(id)
         .then(function (obj) {
@@ -521,14 +518,14 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
             }
           }
           setRunning(false)
-          core_1.hideLoading(p1.loading)
+          input_1.hideLoading(p1.loading)
         })
         .catch(function (err) {
           var _a, _b, _c
           var data = err && err.response ? err.response : err
-          var r = p1.resource
-          var title = r.value("error")
-          var msg = r.value("error_internal")
+          var resource = p1.resource.resource()
+          var title = resource.error
+          var msg = resource.error_internal
           if (data && data.status === 422) {
             fail((_a = err.response) === null || _a === void 0 ? void 0 : _a.data)
             var obj = (_c = (_b = err.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.value
@@ -540,7 +537,7 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
               handleNotFound(refForm.current)
             } else {
               if (data.status && !isNaN(data.status)) {
-                msg = error_1.messageByHttpStatus(data.status, r.value)
+                msg = common_1.messageByHttpStatus(data.status, resource)
               }
               if (data && (data.status === 401 || data.status === 403)) {
                 formutil_1.setReadOnly(refForm.current)
@@ -549,7 +546,7 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
             }
           }
           setRunning(false)
-          core_1.hideLoading(p1.loading)
+          input_1.hideLoading(p1.loading)
         })
     } else {
       var obj = createModel()

package/lib/useSearch.js

@@ -22,14 +22,42 @@ var __spreadArrays =
   }
 Object.defineProperty(exports, "__esModule", { value: true })
 var react_1 = require("react")
+var common_1 = require("./common")
 var core_1 = require("./core")
-var error_1 = require("./error")
+var input_1 = require("./input")
 var merge_1 = require("./merge")
 var reflect_1 = require("./reflect")
 var route_1 = require("./route")
 var search_1 = require("./search")
 var state_1 = require("./state")
 var update_1 = require("./update")
+function showPaging(com, list, pageSize, total) {
+  com.total = total
+  var pageTotal = search_1.getPageTotal(pageSize, total)
+  com.pages = pageTotal
+  com.showPaging = !total || com.pages <= 1 || (list && list.length >= total) ? false : true
+}
+exports.showPaging = showPaging
+function removeFormError(u, f) {
+  if (f && u && u.ui) {
+    u.ui.removeFormError(f)
+  }
+}
+exports.removeFormError = removeFormError
+function getValidateForm(u, vf) {
+  if (vf) {
+    return vf
+  }
+  return u && u.ui ? u.ui.validateForm : undefined
+}
+exports.getValidateForm = getValidateForm
+function getRemoveError(u, rmErr) {
+  if (rmErr) {
+    return rmErr
+  }
+  return u && u.ui ? u.ui.removeError : undefined
+}
+exports.getRemoveError = getRemoveError
 function getModel(state, modelName, searchable, fields, excluding) {
   var obj2 = getModelFromState(state, modelName)
   var obj = obj2 ? obj2 : {}
@@ -259,7 +287,7 @@ exports.useSearch = function (refForm, initialState, service, p2, p) {
       searchError = baseProps.searchError
     if (refForm) {
       var registerEvents = p2.ui ? p2.ui.registerEvents : undefined
-      core_1.initForm(refForm.current, registerEvents)
+      input_1.initForm(refForm.current, registerEvents)
     }
     if (p && p.initialize) {
       p.initialize(load, setState, component)
@@ -281,16 +309,20 @@ exports.useSearchOneProps = function (p) {
 exports.useSearchOne = function (p) {
   return exports.useCoreSearch(p.refForm, p.initialState, p.service, p, p)
 }
+function getName(d, n) {
+  return n && n.length > 0 ? n : d
+}
+exports.getName = getName
 exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
   var p = mergeParam(p2)
   var _a = react_1.useState(),
     running = _a[0],
     setRunning = _a[1]
   var _getModelName = function () {
-    return core_1.getName("filter", p && p.name ? p.name : undefined)
+    return getName("filter", p && p.name ? p.name : undefined)
   }
   var getModelName = p && p.getModelName ? p.getModelName : _getModelName
-  var baseProps = update_1.useUpdate(initialState, getModelName, p1.getLocale, core_1.getRemoveError(p1))
+  var baseProps = update_1.useUpdate(initialState, getModelName, p1.getLocale, getRemoveError(p1))
   var state = baseProps.state,
     setState = baseProps.setState
   var _b = react_1.useState(false),
@@ -359,7 +391,7 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
   }
   var load = p && p.load ? p.load : _load
   var doSearch = function (se, isFirstLoad) {
-    core_1.removeFormError(p1, refForm.current)
+    removeFormError(p1, refForm.current)
     var s = getFilter(se)
     if (isFirstLoad) {
       setState(state)
@@ -370,7 +402,7 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
         return
       }
       setRunning(true)
-      core_1.showLoading(p1.loading)
+      input_1.showLoading(p1.loading)
       if (p && !p.ignoreUrlParam) {
         search_1.addParametersIntoUrl(s, isFirstLoad)
       }
@@ -383,7 +415,7 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
     })
   }
   var _validateSearch = function (se, callback) {
-    validate(se, callback, refForm.current, p1.getLocale ? p1.getLocale() : undefined, core_1.getValidateForm(p1))
+    validate(se, callback, refForm.current, p1.getLocale ? p1.getLocale() : undefined, getValidateForm(p1))
   }
   var validateSearch = p && p.validateSearch ? p.validateSearch : _validateSearch
   var pageSizeChanged = function (event) {
@@ -472,8 +504,9 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
   }
   var searchError = function (err) {
     setComponent({ page: component.tmpPageIndex })
-    error_1.error(err, p1.resource.value, p1.showError)
-    core_1.hideLoading(p1.loading)
+    var resource = p1.resource.resource()
+    common_1.error(err, resource, p1.showError)
+    input_1.hideLoading(p1.loading)
   }
   var appendList = p && p.appendList ? p.appendList : appendListOfState
   var setList = p && p.setList ? p.setList : setListOfState
@@ -500,7 +533,7 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
         setList(results, setState)
       }
     } else {
-      search_1.showPaging(component, sr.list, s.limit, sr.total)
+      showPaging(component, sr.list, s.limit, sr.total)
       setList(results, setState)
       setComponent({ tmpPageIndex: s.page })
       if (s.limit) {
@@ -509,7 +542,7 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
       }
     }
     setRunning(false)
-    core_1.hideLoading(p1.loading)
+    input_1.hideLoading(p1.loading)
     if (component.triggerSearch) {
       setComponent({ triggerSearch: false })
       resetAndSearch()

package/lib/util.js

@@ -72,15 +72,15 @@ function getStringCurrency(value, datatype, locale, maxLength, isOnBlur) {
     }
   }
   var dotPosition = value.indexOf(".")
-  var beforeDot = dotPosition >= 0 ? value.substr(0, dotPosition) : value
+  var beforeDot = dotPosition >= 0 ? value.substring(0, dotPosition) : value
   if (datatype === "string-currency" || isOnBlur) {
     beforeDot = beforeDot.replace(new RegExp("\\B(?=(\\d{" + groupDigits + "})+(?!\\d))", "g"), groupSeparator)
   }
   var 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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-core",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "react",
   "main": "./lib/index.js",
   "types": "./src/index.ts",

package/src/common.ts

@@ -0,0 +1,28 @@
+import { StringMap } from "./core"
+
+export function messageByHttpStatus(status: number, resource: StringMap): string {
+  const k = "error_" + status
+  let msg = resource[k]
+  if (!msg || msg.length === 0) {
+    msg = resource.error_500
+  }
+  return msg
+}
+export function error(err: any, resource: StringMap, ae: (msg: string, callback?: () => void, header?: string) => void) {
+  const title = resource.error
+  let msg = resource.error_internal
+  if (!err) {
+    ae(msg, undefined, title)
+    return
+  }
+  const data = err && err.response ? err.response : err
+  if (data) {
+    const status = data.status
+    if (status && !isNaN(status)) {
+      msg = messageByHttpStatus(status, resource)
+    }
+    ae(msg, undefined, title)
+  } else {
+    ae(msg, undefined, title)
+  }
+}

package/src/core.ts

@@ -1,5 +1,3 @@
-import { focusFirstElement } from "./formutil"
-
 export interface LoadingService {
   showLoading(firstTime?: boolean): void
   hideLoading(): void
@@ -19,13 +17,6 @@ export class resources {
   static pageMaxSize = 7
 }
 
-export function removePhoneFormat(phone: string): string {
-  if (phone) {
-    return phone.replace(resources.phone, "")
-  } else {
-    return phone
-  }
-}
 export interface StringMap {
   [key: string]: string
 }
@@ -55,7 +46,6 @@ export interface ErrorMessage {
 }
 export interface UIService {
   getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string | number | boolean | null | undefined
-  // decodeFromForm(form: HTMLFormElement, locale?: Locale, currencyCode?: string | null): any;
 
   validateForm(form?: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean): boolean
   removeFormError(form: HTMLFormElement): void
@@ -66,7 +56,7 @@ export interface UIService {
   registerEvents?(form: HTMLFormElement): void
 }
 
-export type DataType =
+export type Type =
   | "ObjectId"
   | "date"
   | "datetime"
@@ -88,9 +78,21 @@ export type DataType =
   | "datetimes"
   | "times"
 
+export type Format = "currency" | "percentage" | "email" | "url" | "phone" | "fax" | "ipv4" | "ipv6"
+
+export interface Attribute {
+  name?: string
+  type?: Type
+  format?: Format
+  key?: boolean
+  version?: boolean
+  typeof?: Attributes
+  scale?: number
+  noformat?: boolean
+}
 export interface Attribute {
   name?: string
-  type?: DataType
+  type?: Type
   key?: boolean
   version?: boolean
   typeof?: Attributes
@@ -98,125 +100,3 @@ export interface Attribute {
 export interface Attributes {
   [key: string]: Attribute
 }
-
-export const datetimeToString = (inputDate: Date) => {
-  const date = new Date(inputDate)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, "0")
-  const day = String(date.getDate()).padStart(2, "0")
-  const hours = String(date.getHours()).padStart(2, "0")
-  const minutes = String(date.getMinutes()).padStart(2, "0")
-  const seconds = String(date.getSeconds()).padStart(2, "0")
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`
-}
-
-export const dateToString = (inputDate: Date) => {
-  const year = inputDate.getFullYear()
-  const month = String(inputDate.getMonth() + 1).padStart(2, "0")
-  const day = String(inputDate.getDate()).padStart(2, "0")
-  return `${year}-${month}-${day}`
-}
-
-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 getName(d: string, n?: string): string {
-  return n && n.length > 0 ? n : d
-}
-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 ""
-}
-
-export const scrollToFocus = (e: any, isUseTimeOut?: boolean) => {
-  try {
-    const element = e.target as HTMLInputElement
-    const form = element.form
-    if (form) {
-      const container = form.childNodes[1] as HTMLElement
-      const elementRect = element.getBoundingClientRect()
-      const absoluteElementTop = elementRect.top + window.pageYOffset
-      const middle = absoluteElementTop - window.innerHeight / 2
-      const scrollTop = container.scrollTop
-      const timeOut = isUseTimeOut ? 300 : 0
-      const isChrome = navigator.userAgent.search("Chrome") > 0
-      setTimeout(() => {
-        if (isChrome) {
-          const scrollPosition = scrollTop === 0 ? elementRect.top + 64 : scrollTop + middle
-          container.scrollTo(0, Math.abs(scrollPosition))
-        } else {
-          container.scrollTo(0, Math.abs(scrollTop + middle))
-        }
-      }, timeOut)
-    }
-  } catch (e) {
-    console.log(e)
-  }
-}
-export interface LoadingParameter {
-  loading?: LoadingService
-}
-export function showLoading(s?: LoadingService): void {
-  if (s) {
-    s.showLoading()
-  }
-}
-export function hideLoading(s?: LoadingService): void {
-  if (s) {
-    s.hideLoading()
-  }
-}
-export interface UIParameter {
-  ui?: UIService
-}
-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 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 getDecodeFromForm(u?: UIParameter, d?: (form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any): ((form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any) | undefined {
-  if (d) {
-    return d;
-  }
-  return (u && u.ui ? u.ui.decodeFromForm : undefined);
-}
-*/

package/src/formutil.ts

@@ -40,33 +40,6 @@ export function setReadOnly(form?: HTMLFormElement | null, ...args: string[]): v
     }
   }
 }
-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
-      }
-    }
-  }
-}
 export function focusFirstError(form?: HTMLFormElement | null, className?: string): void {
   if (!form) {
     return

package/src/index.ts

@@ -203,3 +203,29 @@ export function datetimeToString(date?: Date | string): string | undefined {
 export function getNumber(event: ChangeEvent<HTMLSelectElement | HTMLInputElement>): number {
   return parseInt(event.currentTarget.value, 10)
 }
+
+export const scrollToFocus = (e: any, isUseTimeOut?: boolean) => {
+  try {
+    const element = e.target as HTMLInputElement
+    const form = element.form
+    if (form) {
+      const container = form.childNodes[1] as HTMLElement
+      const elementRect = element.getBoundingClientRect()
+      const absoluteElementTop = elementRect.top + window.pageYOffset
+      const middle = absoluteElementTop - window.innerHeight / 2
+      const scrollTop = container.scrollTop
+      const timeOut = isUseTimeOut ? 300 : 0
+      const isChrome = navigator.userAgent.search("Chrome") > 0
+      setTimeout(() => {
+        if (isChrome) {
+          const scrollPosition = scrollTop === 0 ? elementRect.top + 64 : scrollTop + middle
+          container.scrollTo(0, Math.abs(scrollPosition))
+        } else {
+          container.scrollTo(0, Math.abs(scrollTop + middle))
+        }
+      }, timeOut)
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}