react-hook-core 0.0.1 → 0.1.3

package/src/core.ts

@@ -1,15 +1,14 @@
-import * as H from 'history';
-import {match} from 'react-router-dom';
+import {RouteComponentProps} from 'react-router';
 import {focusFirstElement} from './formutil';
 
-export interface HistoryProps {
-  location: H.Location;
-  history: H.History;
-  match?: match;
-}
+export const pageSizes = [12, 24, 60, 100, 120, 180, 300, 600];
 export interface ModelMap {
   [key: string]: any;
 }
+export interface PageChange {
+  page: number; // currentPage
+  size: number; // itemsPerPage
+}
 export interface ModelProps {
   setGlobalState?: (m: ModelMap) => void;
   shouldBeCustomized?: boolean;
@@ -76,7 +75,7 @@ export function createDiffStatus(status?: DiffStatusConfig): DiffStatusConfig {
   return s;
 }
 
-export interface SearchModel {
+export interface Filter {
   q?: string;
   page?: number;
   limit?: number;
@@ -90,17 +89,14 @@ export interface SearchResult<T> {
   nextPageToken?: string;
   last?: boolean;
 }
-export interface SearchState<T, S extends SearchModel> {
+export interface SearchState<T, S extends Filter> {
   model?: S;
   q?: string;
   list?: T[];
 }
-export interface SearchService<T, S extends SearchModel> {
+export interface SearchService<T, S extends Filter> {
   keys?(): string[];
   search(s: S, limit?: number, offset?: number|string, fields?: string[]): Promise<SearchResult<T>>;
-}
-export interface ModelHistoryProps extends HistoryProps, ModelProps {
-
 }
 export interface ViewParameter {
   resource: ResourceService;
@@ -156,8 +152,14 @@ export class resource {
   static _cache: any = {};
   static cache = true;
 }
-export function getCurrencyCode(form: HTMLFormElement): string {
-  return (form ? form.getAttribute('currency-code') : null);
+export function getCurrencyCode(form?: HTMLFormElement|null): string|undefined {
+  if (form) {
+    const x = form.getAttribute('currency-code');
+    if (x) {
+      return x;
+    }
+  }
+  return undefined;
 }
 export function removePhoneFormat(phone: string): string {
   if (phone) {
@@ -176,33 +178,38 @@ export interface ResourceService {
 }
 export interface Message {
   message: string;
-  title?: string;
+  title: string;
   yes?: string;
   no?: string;
 }
-export function message(gv: (key: string) => string, msg: string, title?: string, yes?: string, no?: string): Message {
-  const m2 = (msg && msg.length > 0 ? gv(msg) : '');
-  const m: Message = {
-    message: m2
-  };
-  if (title && title.length > 0) {
-    m.title = gv(title);
-  }
-  if (yes && yes.length > 0) {
-    m.yes = gv(yes);
-  }
-  if (no && no.length > 0) {
-    m.no = gv(no);
+export function getString(key: string, gv: StringMap|((key: string) => string)): string {
+  if (typeof gv === 'function') {
+    return gv(key);
+  } else {
+    return gv[key];
   }
-  return m;
 }
-export function messageByHttpStatus(status: number, gv: (key: string) => string): string {
+export function message(gv: StringMap|((key: string) => string), msg: string, title?: string, yes?: string, no?: string): Message {
+  const m2 = (msg && msg.length > 0 ? getString(msg, gv) : '');
+    const m: Message = { message: m2, title: '' };
+    if (title && title.length > 0) {
+      m.title = getString(title, gv);
+    }
+    if (yes && yes.length > 0) {
+      m.yes = getString(yes, gv);
+    }
+    if (no && no.length > 0) {
+      m.no = getString(no, gv);
+    }
+    return m;
+}
+export function messageByHttpStatus(status: number, gv: StringMap|((key: string) => string)): string {
   const k = 'status_' + status;
-  let msg = gv(k);
-  if (!msg || msg.length === 0) {
-    msg = gv('error_internal');
-  }
-  return msg;
+  let msg = getString(k, gv);
+    if (!msg || msg.length === 0) {
+      msg = getString('error_internal', gv);
+    }
+    return msg;
 }
 
 export interface Locale {
@@ -230,20 +237,21 @@ export interface ErrorMessage {
 }
 export interface UIService {
   getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string|number|boolean;
-  decodeFromForm(form: HTMLFormElement, locale?: Locale, currencyCode?: string): any;
+  decodeFromForm(form: HTMLFormElement, locale?: Locale, currencyCode?: string|null): any;
 
-  validateForm(form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean): boolean;
+  validateForm(form?: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean): boolean;
   removeFormError(form: HTMLFormElement): void;
   removeError(el: HTMLInputElement): void;
-  showFormError(form: HTMLFormElement, errors: ErrorMessage[], focusFirst?: boolean): ErrorMessage[];
+  showFormError(form?: HTMLFormElement, errors?: ErrorMessage[], focusFirst?: boolean): ErrorMessage[];
   buildErrorMessage(errors: ErrorMessage[]): string;
 
   registerEvents?(form: HTMLFormElement): void;
 }
 
 export type DataType = 'ObjectId' | 'date' | 'datetime' | 'time'
-    | 'boolean' | 'number' | 'integer' | 'string' | 'text'
-    | 'object' | 'array' | 'primitives' | 'binary';
+  | 'boolean' | 'number' | 'integer' | 'string' | 'text'
+  | 'object' | 'array' | 'binary'
+  | 'primitives' | 'booleans' | 'numbers' | 'integers' | 'strings' | 'dates' | 'datetimes' | 'times';
 /*
 export interface Metadata {
   name?: string;
@@ -277,11 +285,11 @@ export function buildKeys(attributes: Attributes): string[] {
   return ps;
 }
 
-export function buildId<ID>(props: any, keys?: string[]): ID {
+export function buildId<ID>(props: RouteComponentProps, keys?: string[]): ID|null {
   if (!props) {
     return null;
   }
-  const sp = (props.match ? props : props['props']);
+  const sp: any = ((props as any).match ? props : (props as any)['props']);
   if (!keys || keys.length === 0 || keys.length === 1) {
     if (keys && keys.length === 1) {
       const x = sp.match.params[keys[0]];
@@ -401,7 +409,10 @@ export function error(err: any, gv: (key: string) => string, ae: (msg: string, h
     ae(msg, title);
   }
 }
-export function getModelName(form: HTMLFormElement): string {
+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) {
@@ -415,28 +426,73 @@ export function getModelName(form: HTMLFormElement): string {
       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 container = element.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);
+    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/diff.ts

@@ -29,8 +29,11 @@ export function formatDiffModel<T, ID>(obj: DiffModel<T, ID>, formatFields?: (ob
   return obj2;
 }
 
-export function getDataFields(form: HTMLElement): HTMLElement[] {
+export function getDataFields(form?: HTMLElement|null): HTMLElement[] {
   let results: HTMLElement[] = [];
+  if (!form) {
+    return results;
+  }
   const attributeValue = form.getAttribute('data-field');
   if (attributeValue && attributeValue.length > 0) {
     results.push(form);

package/src/edit.ts

@@ -10,7 +10,7 @@ export interface EditParameter {
   resource: ResourceService;
   showMessage: (msg: string, option?: string) => void;
   showError: (m: string, header?: string, detail?: string, callback?: () => void) => void;
-  confirm: (m2: string, header: string, yesCallback?: () => void, btnLeftText?: string, btnRightText?: string, noCallback?: () => void) => void;
+  confirm: (m2: string, header?: string, yesCallback?: () => void, btnLeftText?: string, btnRightText?: string, noCallback?: () => void) => void;
   ui?: UIService;
   getLocale?: (profile?: string) => Locale;
   loading?: LoadingService;
@@ -26,9 +26,9 @@ export interface MetaModel {
   keys?: string[];
   version?: string;
 }
-export function build(attributes: Attributes, name?: string): MetaModel {
+export function build(attributes: Attributes, name?: string): MetaModel|undefined {
   if (!attributes) {
-    return null;
+    return undefined;
   }
   if (resource.cache && name && name.length > 0) {
     let meta: MetaModel = resource._cache[name];
@@ -77,53 +77,55 @@ export function createModel<T>(attributes?: Attributes): T {
   const attrs = Object.keys(attributes);
   for (const k of attrs) {
     const attr = attributes[k];
-    switch (attr.type) {
-      case 'string':
-      case 'text':
-        obj[attr.name] = '';
-        break;
-      case 'integer':
-      case 'number':
-        obj[attr.name] = 0;
-        break;
-      case 'array':
-        obj[attr.name] = [];
-        break;
-      case 'boolean':
-        obj[attr.name] = false;
-        break;
-      case 'date':
-        obj[attr.name] = new Date();
-        break;
-      case 'object':
-        if (attr.typeof) {
-          const object = createModel(attr.typeof);
-          obj[attr.name] = object;
+    if (attr.name) {
+      switch (attr.type) {
+        case 'string':
+        case 'text':
+          obj[attr.name] = '';
           break;
-        } else {
-          obj[attr.name] = {};
+        case 'integer':
+        case 'number':
+          obj[attr.name] = 0;
           break;
-        }
-      case 'ObjectId':
-        obj[attr.name] = null;
-        break;
-      default:
-        obj[attr.name] = '';
-        break;
+        case 'array':
+          obj[attr.name] = [];
+          break;
+        case 'boolean':
+          obj[attr.name] = false;
+          break;
+        case 'date':
+          obj[attr.name] = new Date();
+          break;
+        case 'object':
+          if (attr.typeof) {
+            const object = createModel(attr.typeof);
+            obj[attr.name] = object;
+            break;
+          } else {
+            obj[attr.name] = {};
+            break;
+          }
+        case 'ObjectId':
+          obj[attr.name] = null;
+          break;
+        default:
+          obj[attr.name] = '';
+          break;
+      }
     }
   }
   return obj;
 }
 
-export function initPropertyNullInModel<T>(obj: T, m: Attributes): T {
+export function initPropertyNullInModel<T>(obj: T, m?: Attributes): T {
   if (!m) {
     const x: any = {};
     return x;
   }
   const model = createModel(m);
-  for (const key of Object.keys(model)) {
-    if (obj && !obj.hasOwnProperty(key)) {
-      obj[key] = model[key];
+  for (const key of Object.keys(model as any)) {
+    if (obj && !(obj as any).hasOwnProperty(key)) {
+      (obj as any)[key] = (model as any)[key];
     }
   }
   return obj;
@@ -138,13 +140,13 @@ export function handleStatus(x: number|string, st: EditStatusConfig, gv: (k: str
     se(gv('error_internal'), title);
   }
 }
-export function handleVersion<T>(obj: T, version: string) {
+export function handleVersion<T>(obj: T, version?: string): void {
   if (obj && version && version.length > 0) {
-    const v = obj[version];
+    const v = (obj as any)[version];
     if (v && typeof v === 'number') {
-      obj[version] = v + 1;
+      (obj as any)[version] = v + 1;
     } else {
-      obj[version] = 1;
+      (obj as any)[version] = 1;
     }
   }
 }

package/src/formutil.ts

@@ -1,4 +1,4 @@
-export function readOnly(form: HTMLFormElement): void {
+export function readOnly(form?: HTMLFormElement|null): void {
   if (!form) {
     return;
   }
@@ -64,14 +64,17 @@ export function focusFirstElement(form: HTMLFormElement): void {
     }
   }
 }
-export function focusFirstError(form: HTMLFormElement, className?: string): void {
+export function focusFirstError(form?: HTMLFormElement|null, className?: string): void {
+  if (!form) {
+    return;
+  }
   const len = form.length;
   if (className && className.length > 0) {
     for (let i = 0; i < len; i++) {
       const ctrl = form[i] as HTMLInputElement;
       const parent = ctrl.parentElement;
       if (ctrl.classList.contains(className)
-        || parent.classList.contains(className)) {
+        || parent && parent.classList.contains(className)) {
         ctrl.focus();
         ctrl.scrollIntoView();
         return;
@@ -83,7 +86,7 @@ export function focusFirstError(form: HTMLFormElement, className?: string): void
       const parent = ctrl.parentElement;
       if (ctrl.classList.contains('invalid')
         || ctrl.classList.contains('.ng-invalid')
-        || parent.classList.contains('invalid')) {
+        || parent && parent.classList.contains('invalid')) {
         ctrl.focus();
         ctrl.scrollIntoView();
         return;

package/src/index.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
 export * from './formutil';
 export * from './util';
 export * from './core';
@@ -12,3 +14,34 @@ export * from './update';
 export * from './useView';
 export * from './useEdit';
 export * from './useSearch';
+export * from './useMessage';
+
+export const withDefaultProps = (Component: any) => (props: RouteComponentProps) => {
+  // return <Component props={props} history={props.history} />;
+  return React.createElement(Component, { props, history: props.history });
+};
+export interface LoadingProps {
+  error?: any;
+}
+export const Loading = (props: LoadingProps) => {
+  const loadingStyle = {
+    top: '30%',
+    backgroundColor: 'white',
+    border: 'none',
+    'WebkitBoxShadow': 'none',
+    'boxShadow': 'none'
+  };
+  if (props.error) {
+    return React.createElement('div', null, 'Error Load Module!'); // return (<div>Error Load Module!</div>);
+  } else {
+    return (React.createElement('div', { className: 'loader-wrapper' }, React.createElement('div', { className: 'loader-sign', style: loadingStyle }, React.createElement('div', { className: 'loader' }))));
+    /*
+    return (
+      <div className='loader-wrapper'>
+        <div className='loader-sign' style={loadingStyle}>
+          <div className='loader' />
+        </div>
+      </div>
+    );*/
+  }
+};

package/src/merge.ts

@@ -3,15 +3,15 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 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);
+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 isFirstCallbackCall = useRef<boolean>(true);
 
   const setState = useCallback((newState: Partial<T>, callback?: Callback<T>): void => {
     callbackRef.current = callback;
-    _setState(prevState => Object.assign({}, prevState, newState));
+    _setState((prevState: any) => Object.assign({}, prevState, newState));
   }, []);
 
   useEffect(() => {

package/src/state.ts

@@ -14,11 +14,15 @@ export const enLocale = {
   'currencySymbol': '$',
   'currencyPattern': 0
 };
-export function localeOf(lc?: Locale, glc?: () => Locale): Locale {
-  let l: Locale = lc;
+export function localeOf(lc?: Locale, glc?: (() => Locale) | Locale): Locale {
+  let l: Locale|undefined = lc;
   if (!l) {
     if (glc) {
-      l = glc();
+      if (typeof glc === 'function') {
+        l = glc();
+      } else {
+        l = glc;
+      }
     }
     if (!l) {
       l = enLocale;
@@ -41,31 +45,33 @@ export function handleEvent(e: any, removeErr?: (ctrl: HTMLInputElement) => void
     removeErr(ctrl);
   }
 }
-export function handleProps<P extends ModelProps>(e: any, props: P, ctrl: HTMLInputElement, modelName: string, tloc: Locale, prepareData: (data: any) => void) {
+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[modelName];
+      const propsDataForm = (props as any)[modelName];
       const form = ctrl.form;
-      const formName = form.name;
-      if (field.indexOf('.') < 0 && field.indexOf('[') < 0) {
-        const data = props.shouldBeCustomized ? prepareData({ [ctrl.name]: res.value }) : { [ctrl.name]: res.value };
-        props.setGlobalState({ [formName]: { ...propsDataForm, ...data } });
-      } else {
-        setValue(propsDataForm, field, ctrl.value);
-        props.setGlobalState({ [formName]: { ...propsDataForm } });
+      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 {
+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[modelName];
+      const ex = (state as any)[modelName];
       const dataField = ctrl.getAttribute('data-field');
       const field = (dataField ? dataField : ctrl.name);
       const model = Object.assign({}, ex);
@@ -75,7 +81,7 @@ export function buildState<S, K extends keyof S>(e: any, state: Readonly<S>, ctr
           if (!value || !Array.isArray(value)) {
             value = [];
           }
-          value.includes(ctrl.value) ? value = value.filter(v => v !== ctrl.value) : value.push(ctrl.value);
+          value.includes(ctrl.value) ? value = value.filter((v: string) => v !== ctrl.value) : value.push(ctrl.value);
           model[field] = value;
         } else {
           const v = valueOfCheckbox(ctrl);
@@ -124,7 +130,7 @@ export function valueOfCheckbox(ctrl: HTMLInputElement): string|number|boolean {
     return ctrl.checked === true;
   }
 }
-export function buildFlatState<S, K extends keyof S>(e: any, state: Readonly<S>, l: Locale): K {
+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 = {};
@@ -135,8 +141,8 @@ export function buildFlatState<S, K extends keyof S>(e: any, state: Readonly<S>,
       objSet[stateName] = v;
       return objSet;
     } else {
-      let value = state[stateName];
-      value.includes(ctrl.value) ? value = value.filter(v => v !== ctrl.value) : value.push(ctrl.value);
+      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;
     }
@@ -146,7 +152,7 @@ export function buildFlatState<S, K extends keyof S>(e: any, state: Readonly<S>,
       objSet[stateName] = data.value;
       return objSet;
     } else {
-      return null;
+      return undefined;
     }
   }
 }