react-hook-core 0.4.5 → 0.4.7

package/src/useView.ts

@@ -1,146 +1,171 @@
-import {useEffect, useState} from 'react';
-import {useNavigate, useParams} from 'react-router';
-import {buildId, getModelName as getModelName2, hideLoading, initForm, LoadingService, Locale, message, messageByHttpStatus, ResourceService, showLoading, ViewParameter, ViewService} from './core';
-import {setReadOnly} from './formutil';
-import {DispatchWithCallback, useMergeState} from './merge';
+import { useEffect, useState } from "react"
+import { useNavigate, useParams } from "react-router"
+import { Attributes, buildId, getModelName as getModelName2, hideLoading, initForm, LoadingService, Locale, ResourceService, showLoading } from "./core"
+import { message, messageByHttpStatus } from "./error"
+import { setReadOnly } from "./formutil"
+import { DispatchWithCallback, useMergeState } from "./merge"
+
+export interface ViewParameter {
+  resource: ResourceService
+  showError: (m: string, header?: string, detail?: string, callback?: () => void) => void
+  getLocale?: (profile?: string) => Locale
+  loading?: LoadingService
+}
+export interface ViewService<T, ID> {
+  metadata?(): Attributes | undefined
+  keys?(): string[]
+  load(id: ID, ctx?: any): Promise<T | null>
+}
 
 export interface BaseViewComponentParam<T, ID> {
-  name?: string;
-  handleNotFound?: (form?: HTMLFormElement) => void;
-  getModelName?: (f?: HTMLFormElement) => string;
-  showModel?: (m: T) => void;
-  load?: (i: ID, callback?: (m: T, showM: (m2: T) => void) => void) => void;
+  name?: string
+  handleNotFound?: (form?: HTMLFormElement) => void
+  getModelName?: (f?: HTMLFormElement) => string
+  showModel?: (m: T) => void
+  load?: (i: ID, callback?: (m: T, showM: (m2: T) => void) => void) => void
 }
 export interface HookBaseViewParameter<T, ID, S> extends BaseViewComponentParam<T, ID> {
-  refForm: any;
-  initialState: S;
-  service: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>;
-  resource: ResourceService;
-  showError: (m: string, header?: string, detail?: string, callback?: () => void) => void;
-  getLocale?: () => Locale;
-  loading?: LoadingService;
+  refForm: any
+  initialState: S
+  service: ((id: ID, ctx?: any) => Promise<T>) | ViewService<T, ID>
+  resource: ResourceService
+  showError: (m: string, header?: string, detail?: string, callback?: () => void) => void
+  getLocale?: () => Locale
+  loading?: LoadingService
 }
 export interface ViewComponentParam<T, ID, S> extends BaseViewComponentParam<T, ID> {
-  keys?: string[];
-  initialize?: (id: ID, ld: (i: ID, cb?: (m: T, showF: (model: T) => void) => void) => void, setState2: DispatchWithCallback<Partial<S>>, callback?: (m: T, showF: (model: T) => void) => void) => void;
-  callback?: (m: T, showF: (model: T) => void) => void;
+  keys?: string[]
+  initialize?: (
+    id: ID,
+    ld: (i: ID, cb?: (m: T, showF: (model: T) => void) => void) => void,
+    setState2: DispatchWithCallback<Partial<S>>,
+    callback?: (m: T, showF: (model: T) => void) => void,
+  ) => void
+  callback?: (m: T, showF: (model: T) => void) => void
 }
 export interface HookPropsViewParameter<T, ID, S, P> extends HookPropsBaseViewParameter<T, ID, S, P> {
-  keys?: string[];
-  initialize?: (id: ID, ld: (i: ID, cb?: (m: T, showF: (model: T) => void) => void) => void, setState2: DispatchWithCallback<Partial<S>>, callback?: (m: T, showF: (model: T) => void) => void) => void;
-  callback?: (m: T, showF: (model: T) => void) => void;
+  keys?: string[]
+  initialize?: (
+    id: ID,
+    ld: (i: ID, cb?: (m: T, showF: (model: T) => void) => void) => void,
+    setState2: DispatchWithCallback<Partial<S>>,
+    callback?: (m: T, showF: (model: T) => void) => void,
+  ) => void
+  callback?: (m: T, showF: (model: T) => void) => void
 }
 export interface HookPropsBaseViewParameter<T, ID, S, P> extends HookBaseViewParameter<T, ID, S> {
-  props: P;
+  props: P
 }
 export const useViewOne = <T, ID, S>(p: HookBaseViewParameter<T, ID, S>) => {
-  return useCoreView(p.refForm, p.initialState, p.service, p, p);
-};
+  return useCoreView(p.refForm, p.initialState, p.service, p, p)
+}
 export const useView = <T, ID, S>(
   refForm: any,
   initialState: S,
-  service: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
+  service: ((id: ID, ctx?: any) => Promise<T>) | ViewService<T, ID>,
   p1: ViewParameter,
-  p?: ViewComponentParam<T, ID, S>
-  ) => {
-  const baseProps = useCoreView(refForm, initialState, service, p1, p);
-  const [, setState] = useMergeState<S>(initialState);
-  const params = useParams();
+  p?: ViewComponentParam<T, ID, S>,
+) => {
+  const baseProps = useCoreView(refForm, initialState, service, p1, p)
+  const [, setState] = useMergeState<S>(initialState)
+  const params = useParams()
   useEffect(() => {
     if (baseProps.refForm) {
-      initForm(baseProps.refForm.current);
+      initForm(baseProps.refForm.current)
     }
-    const id = buildId<ID>(params, p ? p.keys : undefined);
+    const id = buildId<ID>(params, p ? p.keys : undefined)
     if (id) {
       if (p && p.initialize) {
-        p.initialize(id, baseProps.load, setState, p.callback);
+        p.initialize(id, baseProps.load, setState, p.callback)
       } else {
-        baseProps.load(id, p ? p.callback : undefined);
+        baseProps.load(id, p ? p.callback : undefined)
       }
     }
-  }, []);
-  return {...baseProps};
-};
+  }, [])
+  return { ...baseProps }
+}
 
 export const useCoreView = <T, ID, S>(
   refForm: any,
   initialState: S,
-  service: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
+  service: ((id: ID, ctx?: any) => Promise<T>) | ViewService<T, ID>,
   p1: ViewParameter,
-  p?: ViewComponentParam<T, ID, S>
-  ) => {
-  const [state, setState] = useMergeState<S>(initialState);
-  const [running, setRunning] = useState<boolean>();
-  const navigate = useNavigate();
+  p?: ViewComponentParam<T, ID, S>,
+) => {
+  const [state, setState] = useMergeState<S>(initialState)
+  const [running, setRunning] = useState<boolean>()
+  const navigate = useNavigate()
 
   const back = (event: any) => {
     if (event) {
-      event.preventDefault();
+      event.preventDefault()
     }
-    navigate(-1);
-  };
+    navigate(-1)
+  }
 
   const getModelName = (f?: HTMLFormElement) => {
     if (p && p.name) {
-      return p.name;
+      return p.name
     }
-    return getModelName2(f, 'model');
-  };
+    return getModelName2(f, "model")
+  }
 
   const showModel = (model: T) => {
-    const n: string = getModelName(refForm.current);
-    const objSet: any = {};
-    objSet[n] = model;
-    setState(objSet);
-  };
+    const n: string = getModelName(refForm.current)
+    const objSet: any = {}
+    objSet[n] = model
+    setState(objSet)
+  }
 
   const _handleNotFound = (form?: any): void => {
-    const msg = message(p1.resource.value, 'error_not_found', 'error');
+    const msg = message(p1.resource.value, "error_not_found", "error")
     if (form) {
-      setReadOnly(form);
+      setReadOnly(form)
     }
-    p1.showError(msg.message, msg.title);
-  };
-  const handleNotFound = (p && p.handleNotFound ? p.handleNotFound : _handleNotFound);
+    p1.showError(msg.message, msg.title)
+  }
+  const handleNotFound = p && p.handleNotFound ? p.handleNotFound : _handleNotFound
 
   const _load = (_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) => {
-    const id: any = _id;
-    if (id != null && id !== '') {
-      setRunning(true);
-      showLoading(p1.loading);
-      const fn = (typeof service === 'function' ? service : service.load);
-      fn(id).then(obj => {
-        if (!obj) {
-          handleNotFound(refForm.current);
-        } else {
-          if (callback) {
-            callback(obj, showModel);
+    const id: any = _id
+    if (id != null && id !== "") {
+      setRunning(true)
+      showLoading(p1.loading)
+      const fn = typeof service === "function" ? service : service.load
+      fn(id)
+        .then((obj) => {
+          if (!obj) {
+            handleNotFound(refForm.current)
           } else {
-            showModel(obj);
+            if (callback) {
+              callback(obj, showModel)
+            } else {
+              showModel(obj)
+            }
           }
-        }
-        setRunning(false);
-        hideLoading(p1.loading);
-      }).catch(err => {
-        const data = (err &&  err.response) ? err.response : err;
-        const r = p1.resource;
-        const title = r.value('error');
-        let msg = r.value('error_internal');
-        if (data && data.status === 404) {
-          handleNotFound(refForm.current);
-        } else {
-          if (data && data.status) {
-            msg = messageByHttpStatus(data.status, r.value);
+          setRunning(false)
+          hideLoading(p1.loading)
+        })
+        .catch((err) => {
+          const data = err && err.response ? err.response : err
+          const r = p1.resource
+          const title = r.value("error")
+          let msg = r.value("error_internal")
+          if (data && data.status === 404) {
+            handleNotFound(refForm.current)
+          } else {
+            if (data && data.status) {
+              msg = messageByHttpStatus(data.status, r.value)
+            }
+            setReadOnly(refForm.current)
+            p1.showError(msg, title)
           }
-          setReadOnly(refForm.current);
-          p1.showError(msg, title);
-        }
-        setRunning(false);
-        hideLoading(p1.loading);
-      });
+          setRunning(false)
+          hideLoading(p1.loading)
+        })
     }
-  };
-  const load = (p && p.load ? p.load : _load);
+  }
+  const load = p && p.load ? p.load : _load
 
   return {
     state,
@@ -153,6 +178,6 @@ export const useCoreView = <T, ID, S>(
     getModelName,
     handleNotFound,
     load,
-    back
-  };
-};
+    back,
+  }
+}

package/src/util.ts

@@ -1,120 +1,121 @@
-import {Locale} from './core';
-import {enLocale} from './state';
+import { Locale } from "./core"
+import { enLocale } from "./state"
 
-const r1 = / |,|\$|€|£|¥|'|٬|،| /g;
-const r2 = / |\.|\$|€|£|¥|'|٬|،| /g;
+const r1 = / |,|\$|€|£|¥|'|٬|،| /g
+const r2 = / |\.|\$|€|£|¥|'|٬|،| /g
 
-export function valueOf(ctrl: HTMLInputElement, locale?: Locale, eventType?: string): { mustChange: any, value?: any } {
-  if (ctrl.type === 'checkbox') {
-    const ctrlOnValue = ctrl.getAttribute('data-on-value');
-    const ctrlOffValue = ctrl.getAttribute('data-off-value');
+export function valueOf(ctrl: HTMLInputElement, locale?: Locale, eventType?: string): { mustChange: any; value?: any } {
+  if (ctrl.type === "checkbox") {
+    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 ? { mustChange: true, value: onValue } : { mustChange: true, value: offValue };
+      const onValue = ctrlOnValue ? ctrlOnValue : true
+      const offValue = ctrlOffValue ? ctrlOffValue : false
+      return ctrl.checked === true ? { mustChange: true, value: onValue } : { mustChange: true, value: offValue }
     } else {
-      return ctrl.checked === true ? { mustChange: true, value: true } : { mustChange: true, value: false };
+      return ctrl.checked === true ? { mustChange: true, value: true } : { mustChange: true, value: false }
     }
   } else {
-    const datatype = ctrl.getAttribute('data-type');
-    if (datatype === 'number' || datatype === 'int') {
-      let v;
-      if (locale && locale.decimalSeparator !== '.') {
-        v = ctrl.value.replace(r2, '');
+    const datatype = ctrl.getAttribute("data-type")
+    if (datatype === "number" || datatype === "int") {
+      let v
+      if (locale && locale.decimalSeparator !== ".") {
+        v = ctrl.value.replace(r2, "")
         if (v.indexOf(locale.decimalSeparator) >= 0) {
-          v = v.replace(locale.decimalSeparator, '.');
+          v = v.replace(locale.decimalSeparator, ".")
         }
       } else {
-        v = ctrl.value.replace(r1, '');
+        v = ctrl.value.replace(r1, "")
       }
-      return isNaN(v as any) ? { mustChange: false } : { mustChange: true, value: parseFloat(v) };
-    } else if (datatype === 'currency' || datatype === 'string-currency') {
-      const ml = ctrl.getAttribute('maxlength');
-      const nm = (ml != null && !isNaN(ml as any) ? parseInt(ml, 10) : undefined);
-      const res: any = getStringCurrency(ctrl.value, datatype, locale, nm, eventType === 'blur');
-      return res;
+      return isNaN(v as any) ? { mustChange: false } : { mustChange: true, value: parseFloat(v) }
+    } else if (datatype === "currency" || datatype === "string-currency") {
+      const ml = ctrl.getAttribute("maxlength")
+      const nm = ml != null && !isNaN(ml as any) ? parseInt(ml, 10) : undefined
+      const res: any = getStringCurrency(ctrl.value, datatype, locale, nm, eventType === "blur")
+      return res
     } else {
-      return { mustChange: true, value: ctrl.value };
+      return { mustChange: true, value: ctrl.value }
     }
   }
 }
 
-function getStringCurrency(value: string, datatype: string, locale?: Locale, maxLength?: number, isOnBlur?: boolean): { mustChange: any, value?: string } {
-  if (locale && locale.decimalSeparator !== '.') {
-    value = value.replace(r2, '');
+function getStringCurrency(value: string, datatype: string, locale?: Locale, maxLength?: number, isOnBlur?: boolean): { mustChange: any; value?: string } {
+  if (locale && locale.decimalSeparator !== ".") {
+    value = value.replace(r2, "")
     if (value.indexOf(locale.decimalSeparator) >= 0) {
-      value = value.replace(locale.decimalSeparator, '.');
+      value = value.replace(locale.decimalSeparator, ".")
     }
   } else {
-    value = value.replace(r1, '');
+    value = value.replace(r1, "")
   }
-  if (value === '') {
-    return { mustChange: true, value: '' };
+  if (value === "") {
+    return { mustChange: true, value: "" }
   }
-  value = extractNumber(value, '.'); // value = ReactUtil.extractNumber(value, locale.decimalSeparator);
+  value = extractNumber(value, ".") // value = ReactUtil.extractNumber(value, locale.decimalSeparator);
   if (value.length === 0) {
-    return { mustChange: false };
-  } else if (value.length > 0 && value.charAt(0) === '0') {
-    return { mustChange: true, value: value.substring(1) };
+    return { mustChange: false }
+  } else if (value.length > 0 && value.charAt(0) === "0") {
+    return { mustChange: true, value: value.substring(1) }
   }
 
   if (!locale) {
-    locale = enLocale;
+    locale = enLocale
   }
-  const decimalDigits = locale ? locale.decimalDigits : 2;
-  const groupDigits = 3; // TODO in database locale don't have data
-  const decimalSeparator = locale.decimalSeparator; // '.'
-  const groupSeparator = locale.groupSeparator; // ','
+  const decimalDigits = locale ? locale.decimalDigits : 2
+  const groupDigits = 3 // TODO in database locale don't have data
+  const decimalSeparator = locale.decimalSeparator // '.'
+  const groupSeparator = locale.groupSeparator // ','
 
   if (isOnBlur) {
-    const number = Number(value.replace(/^0+/, ''));
+    const number = Number(value.replace(/^0+/, ""))
     if (number === 0) {
-      return { mustChange: true, value: '' };
+      return { mustChange: true, value: "" }
     } else {
-      value = number.toFixed(decimalDigits);
+      value = number.toFixed(decimalDigits)
     }
   }
 
-  const dotPosition = value.indexOf('.');
+  const dotPosition = value.indexOf(".")
   // Format thousands
-  let beforeDot = dotPosition >= 0 ? value.substr(0, dotPosition) : value;
-  if (datatype === 'string-currency' || isOnBlur) {
-    beforeDot = beforeDot.replace(new RegExp('\\B(?=(\\d{' + groupDigits + '})+(?!\\d))', 'g'), groupSeparator);
+  let beforeDot = dotPosition >= 0 ? value.substr(0, dotPosition) : value
+  if (datatype === "string-currency" || isOnBlur) {
+    beforeDot = beforeDot.replace(new RegExp("\\B(?=(\\d{" + groupDigits + "})+(?!\\d))", "g"), groupSeparator)
   }
 
   // Cut after dot
-  let afterDot;
+  let afterDot
   if (dotPosition > 0) {
-    afterDot = value.substr(dotPosition + 1);
+    afterDot = value.substr(dotPosition + 1)
     if (afterDot.length > decimalDigits) {
-      afterDot = afterDot.substr(0, decimalDigits);
+      afterDot = afterDot.substr(0, decimalDigits)
     }
   }
   if (maxLength && beforeDot.length > maxLength - (decimalDigits + 1)) {
-    return { mustChange: false };
+    return { mustChange: false }
   }
 
-  value = dotPosition >= 0 ? beforeDot + decimalSeparator + afterDot : beforeDot;
-  return maxLength && value.length > maxLength ? { mustChange: false } : { mustChange: true, value };
+  value = dotPosition >= 0 ? beforeDot + decimalSeparator + afterDot : beforeDot
+  return maxLength && value.length > maxLength ? { mustChange: false } : { mustChange: true, value }
 }
 
 function extractNumber(str: string, decimalSeparator: string): string {
-  const arrs: string[] = [];
-  let d = false;
+  const arrs: string[] = []
+  let d = false
   for (let i = 0; i < str.length; i++) {
-    const ch = str.charAt(i);  // get char
-    if (ch >= '0' && ch <= '9') {
-      arrs.push(ch);
-    } else if (ch === decimalSeparator) {// else if (ch === '.') {
+    const ch = str.charAt(i) // get char
+    if (ch >= "0" && ch <= "9") {
+      arrs.push(ch)
+    } else if (ch === decimalSeparator) {
+      // else if (ch === '.') {
       if (d) {
-        return arrs.join('');
+        return arrs.join("")
       } else {
-        d = true;
-        arrs.push(ch);
+        d = true
+        arrs.push(ch)
       }
     } else {
-      return arrs.join('');
+      return arrs.join("")
     }
   }
-  return arrs.join('');
+  return arrs.join("")
 }