react-hook-core 0.1.0 → 0.1.4

package/src/core.ts

@@ -1,16 +1,14 @@
-import * as H from 'history';
 import {RouteComponentProps} from 'react-router';
-import {match} from 'react-router-dom';
 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;
@@ -99,9 +97,6 @@ export interface SearchState<T, S extends Filter> {
 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;
@@ -110,9 +105,9 @@ export interface ViewParameter {
   loading?: LoadingService;
 }
 export interface ViewService<T, ID> {
-  metadata?(): Attributes;
+  metadata?(): Attributes|undefined;
   keys?(): string[];
-  load(id: ID, ctx?: any): Promise<T>;
+  load(id: ID, ctx?: any): Promise<T|null>;
 }
 
 export interface DiffParameter {
@@ -241,7 +236,7 @@ export interface ErrorMessage {
   message?: string;
 }
 export interface UIService {
-  getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string|number|boolean;
+  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;
@@ -385,7 +380,7 @@ export function formatCurrency(currency: string|number, locale?: Locale, currenc
 }
 */
 
-export function initForm(form: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement {
+export function initForm(form?: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement|undefined {
   if (form) {
     setTimeout(() => {
       if (initMat) {
@@ -501,3 +496,14 @@ export function getDecodeFromForm(u?: UIParameter, d?: (form: HTMLFormElement, l
   }
   return (u && u.ui ? u.ui.decodeFromForm : undefined);
 }
+export function handleToggle(target?: HTMLInputElement, on?: boolean): void {
+  if (target) {
+    if (on) {
+      if (!target.classList.contains('on')) {
+        target.classList.add('on');
+      }
+    } else {
+      target.classList.remove('on');
+    }
+  }
+}

package/src/index.ts

@@ -16,7 +16,45 @@ export * from './useEdit';
 export * from './useSearch';
 export * from './useMessage';
 
+export function checked(s: string[]|string|undefined, v: string): boolean|undefined {
+  if (s) {
+    if (Array.isArray(s)) {
+      return s.includes(v);
+    } else {
+      return s === v;
+    }
+  }
+  return false;
+}
+export function value<T>(obj?: T): T {
+  return (obj ? obj : {} as any);
+}
 export const withDefaultProps = (Component: any) => (props: RouteComponentProps) => {
   // return <Component props={props} history={props.history} />;
-  return React.createElement(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/update.ts

@@ -1,4 +1,4 @@
-import {getModelName as getModelName2, Locale, ModelProps, removePhoneFormat} from './core';
+import {getModelName as getModelName2, Locale, removePhoneFormat} from './core';
 import {useMergeState} from './merge';
 import {buildFlatState, buildState, handleEvent, handleProps, localeOf} from './state';
 

package/src/useEdit.ts

@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import {RouteComponentProps} from 'react-router';
 import {clone, makeDiff} from 'reflectx';
-import {Attributes, buildId, createEditStatus, EditStatusConfig, getModelName as getModelName2, hideLoading, initForm, LoadingService, Locale, message, messageByHttpStatus, ModelProps, ResourceService, showLoading, UIService} from './core';
+import {Attributes, buildId, createEditStatus, EditStatusConfig, getModelName as getModelName2, hideLoading, initForm, LoadingService, Locale, message, messageByHttpStatus, ResourceService, showLoading, UIService} from './core';
 import {build, createModel as createModel2, EditParameter, GenericService, handleStatus, handleVersion, initPropertyNullInModel, ResultInfo} from './edit';
 import {focusFirstError, readOnly as setReadOnly} from './formutil';
 import {DispatchWithCallback, useMergeState} from './merge';
@@ -40,8 +40,8 @@ export interface BaseEditComponentParam<T, ID> {
   fail?: (result: ResultInfo<T>) => void;
   postSave?: (obj: T, res: number|ResultInfo<T>, version?: string, backOnSave?: boolean) => void;
   handleDuplicateKey?: (result?: ResultInfo<T>) => void;
-  load?: (i: ID, callback?: (m: T, showM: (m2: T) => void) => void) => void;
-  save?: (obj: T, diff?: T, version?: string, isBack?: boolean) => void;
+  load?: (i: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) => void;
+  doSave?: (obj: T, diff?: T, version?: string, isBack?: boolean) => void;
   prepareCustomData?: (data: any) => void; // need to review
 }
 export interface HookBaseEditParameter<T, ID, S> extends BaseEditComponentParam<T, ID> {
@@ -57,11 +57,11 @@ export interface HookBaseEditParameter<T, ID, S> extends BaseEditComponentParam<
   loading?: LoadingService;
 }
 export interface EditComponentParam<T, ID, S> extends BaseEditComponentParam<T, ID> {
-  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;
+  initialize?: (id: ID|null, ld: (i: ID|null, 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 HookPropsEditParameter<T, ID, S, P extends RouteComponentProps> extends HookPropsBaseEditParameter<T, ID, S, P> {
-  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;
+  initialize?: (id: ID|null, ld: (i: ID|null, 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 HookPropsBaseEditParameter<T, ID, S, P extends RouteComponentProps> extends HookBaseEditParameter<T, ID, S> {
@@ -98,19 +98,19 @@ export const useEditProps = <T, ID, S, P extends RouteComponentProps>(
     let keys: string[]|undefined;
     if (p && !p.keys && service && service.metadata) {
       const metadata = (p.metadata ? p.metadata : service.metadata());
-      const meta = build(metadata);
-      keys = (p.keys ? p.keys : (meta ? meta.keys : undefined));
-      const version = (p.version ? p.version : (meta ? meta.version : undefined));
-      p.keys = keys;
-      p.version = version;
+      if (metadata) {
+        const meta = build(metadata);
+        keys = (p.keys ? p.keys : (meta ? meta.keys : undefined));
+        const version = (p.version ? p.version : (meta ? meta.version : undefined));
+        p.keys = keys;
+        p.version = version;
+      }
     }
     const id = buildId<ID>(props, keys);
-    if (id) {
-      if (p && p.initialize) {
-        p.initialize(id, baseProps.load, baseProps.setState, p.callback);
-      } else {
-        baseProps.load(id, p ? p.callback : undefined);
-      }
+    if (p && p.initialize) {
+      p.initialize(id, baseProps.load, baseProps.setState, p.callback);
+    } else {
+      baseProps.load(id, p ? p.callback : undefined);
     }
   }, []);
   return {...baseProps};
@@ -222,7 +222,7 @@ export const useCoreEdit = <T, ID, S, P>(
   };
   const createModel = (p && p.createModel ? p.createModel : _createModel);
 
-  const newOnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const create = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.preventDefault();
     const obj = createModel();
     resetState(true, obj, undefined);
@@ -260,7 +260,7 @@ export const useCoreEdit = <T, ID, S, P>(
         validate(obj, () => {
           const msg = message(p1.resource.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
           p1.confirm(msg.message, msg.title, () => {
-            save(obj, undefined, version, isBack);
+            doSave(obj, undefined, version, isBack);
           }, msg.no, msg.yes);
         });
       } else {
@@ -272,7 +272,7 @@ export const useCoreEdit = <T, ID, S, P>(
           validate(obj, () => {
             const msg = message(p1.resource.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
             p1.confirm(msg.message, msg.title, () => {
-              save(obj, diffObj, version, isBack);
+              doSave(obj, diffObj, version, isBack);
             }, msg.no, msg.yes);
           });
         }
@@ -281,7 +281,7 @@ export const useCoreEdit = <T, ID, S, P>(
   };
   const onSave = (p && p.onSave ? p.onSave : _onSave);
 
-  const saveOnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const save = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.preventDefault();
     event.persist();
     onSave();
@@ -387,7 +387,7 @@ export const useCoreEdit = <T, ID, S, P>(
   };
   const handleDuplicateKey = (p && p.handleDuplicateKey ? p.handleDuplicateKey : _handleDuplicateKey);
 
-  const _save = (obj: T, body?: T, version?: string, isBack?: boolean) => {
+  const _doSave = (obj: T, body?: T, version?: string, isBack?: boolean) => {
     setRunning(true);
     showLoading(p1.loading);
     const isBackO = (isBack == null || isBack === undefined ? true : isBack);
@@ -402,9 +402,9 @@ export const useCoreEdit = <T, ID, S, P>(
       service.insert(obj).then(result => postSave(obj, result, version, isBackO));
     }
   };
-  const save = (p && p.save ? p.save : _save);
+  const doSave = (p && p.doSave ? p.doSave : _doSave);
 
-  const _load = (_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) => {
+  const _load = (_id: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) => {
     const id: any = _id;
     if (id != null && id !== '') {
       setRunning(true);
@@ -469,8 +469,8 @@ export const useCoreEdit = <T, ID, S, P>(
     handleNotFound,
     getModel,
     createNewModel: createModel,
-    newOnClick,
-    saveOnClick,
+    newOnClick: create,
+    save,
     onSave,
     confirm,
     validate,
@@ -480,6 +480,6 @@ export const useCoreEdit = <T, ID, S, P>(
     postSave,
     handleDuplicateKey,
     load,
-    save
+    doSave
   };
 };

package/src/useSearch.ts

@@ -1,8 +1,9 @@
 import {useEffect, useState} from 'react';
+import {RouteComponentProps} from 'react-router';
 import {useHistory, useRouteMatch} from 'react-router-dom';
 import {clone} from 'reflectx';
 import {addParametersIntoUrl, append, buildMessage, Filter, formatResults, getFieldsFromForm, getModel, handleAppend, handleSort, initFilter, mergeFilter as mergeFilter2, Pagination, removeSortStatus, showPaging, Sortable, validate} from 'search-core';
-import {error, getDecodeFromForm, getName, getRemoveError, getValidateForm, hideLoading, initForm, LoadingService, Locale, ModelProps, removeFormError, ResourceService, SearchParameter, SearchResult, SearchService, showLoading, UIService} from './core';
+import {error, getDecodeFromForm, getName, getRemoveError, getValidateForm, handleToggle, hideLoading, initForm, Locale, PageChange, pageSizes, removeFormError, ResourceService, SearchParameter, SearchResult, SearchService, showLoading} from './core';
 import {DispatchWithCallback, useMergeState} from './merge';
 import {buildFromUrl} from './route';
 import {enLocale} from './state';
@@ -23,7 +24,7 @@ export const callSearch = <T, S extends Filter>(se: S, search3: (s: S, limit?: n
   }
   let offset: number;
   if (!se.limit || se.limit <= 0) {
-    se.limit = 20;
+    se.limit = 24;
   }
   if (se.firstLimit && se.firstLimit > 0) {
     offset = se.limit * (page - 2) + se.firstLimit;
@@ -52,13 +53,19 @@ export interface InitSearchComponentParam<T, M extends Filter, S> extends Search
   createFilter?: () => M;
   initialize?: (ld: (s: M, auto?: boolean) => void, setState2: DispatchWithCallback<Partial<S>>, com?: SearchComponentState<T, M>) => void;
 }
-export interface HookPropsSearchParameter<T, S extends Filter, ST, P extends ModelProps> extends HookPropsBaseSearchParameter<T, S, ST, P> {
+export interface HookPropsSearchParameter<T, S extends Filter, ST, P extends RouteComponentProps> extends HookPropsBaseSearchParameter<T, S, ST, P> {
   createFilter?: () => S;
   initialize?: (ld: (s: S, auto?: boolean) => void, setState2: DispatchWithCallback<Partial<ST>>, com?: SearchComponentState<T, S>) => void;
 }
 export interface SearchComponentParam<T, M extends Filter> {
+  addable?: boolean;
+  editable?: boolean;
+  approvable?: boolean;
+  deletable?: boolean;
+
   keys?: string[];
   sequenceNo?: string;
+  hideFilter?: boolean;
   name?: string;
   fields?: string[];
   appendMode?: boolean;
@@ -94,7 +101,7 @@ export interface SearchComponentParam<T, M extends Filter> {
 export interface HookBaseSearchParameter<T, S extends Filter, ST extends SearchComponentState<T, S>> extends SearchComponentParam<T, S> {
   refForm: any;
   initialState: ST;
-  search: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>;
+  service: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>;
   resource: ResourceService;
   showMessage: (msg: string) => void;
   showError: (m: string, header?: string, detail?: string, callback?: () => void) => void;
@@ -109,7 +116,7 @@ export interface SearchComponentState<T, S> extends Pagination, Sortable {
   view?: string;
   nextPageToken?: string;
   keys?: string[];
-  model?: S;
+  filter?: S;
   list?: T[];
 
   format?: (obj: T, locale: Locale) => T;
@@ -120,7 +127,7 @@ export interface SearchComponentState<T, S> extends Pagination, Sortable {
 
   pageMaxSize?: number;
   pageSizes?: number[];
-  excluding?: any;
+  excluding?: string[]|number[];
   hideFilter?: boolean;
 
   ignoreUrlParam?: boolean;
@@ -130,15 +137,14 @@ export interface SearchComponentState<T, S> extends Pagination, Sortable {
   approvable?: boolean;
   deletable?: boolean;
 }
-export const pageSizes = [10, 20, 40, 60, 100, 200, 400, 800];
 
-function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): void {
+function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): SearchComponentParam<T, S> {
   if (p) {
     if (!p.sequenceNo) {
       p.sequenceNo = 'sequenceNo';
     }
     if (!p.pageSize) {
-      p.pageSize = 20;
+      p.pageSize = 24;
     }
     if (!p.pageSizes) {
       p.pageSizes = pageSizes;
@@ -146,16 +152,44 @@ function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): void {
     if (!p.pageMaxSize || p.pageMaxSize <= 0) {
       p.pageMaxSize = 7;
     }
+    if (p.hideFilter === undefined) {
+      p.hideFilter = true;
+    }
+    if (p.addable === undefined) {
+      p.addable = true;
+    }
+    if (p.editable === undefined) {
+      p.editable = true;
+    }
+    if (p.approvable === undefined) {
+      p.approvable = true;
+    }
+    if (p.deletable === undefined) {
+      p.deletable = true;
+    }
+    return p;
+  } else {
+    return {
+      sequenceNo: 'sequenceNo',
+      pageSize: 24,
+      pageSizes,
+      pageMaxSize: 7,
+      hideFilter: true,
+      addable: true,
+      editable: true,
+      approvable: true,
+      deletable: true
+    };
   }
 }
 export const useSearch = <T, S extends Filter, ST extends SearchComponentState<T, S>>(
   refForm: any,
   initialState: ST,
-  search: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>,
+  service: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>,
   p2: SearchParameter,
   p?: InitSearchComponentParam<T, S, ST>,
 ) => {
-  const baseProps = useCoreSearch(undefined, refForm, initialState, search, p2, p);
+  const baseProps = useCoreSearch(undefined, refForm, initialState, service, p2, p);
 
   useEffect(() => {
     const { load, setState, component } = baseProps;
@@ -173,39 +207,39 @@ export const useSearch = <T, S extends Filter, ST extends SearchComponentState<T
   }, []);
   return { ...baseProps };
 };
-export const useSearchOneProps = <T, S extends Filter, ST extends SearchComponentState<T, S>, P>(p: HookPropsSearchParameter<T, S, ST, P>) => {
-  return useSearch(p.refForm, p.initialState, p.search, p, p);
+export const useSearchOneProps = <T, S extends Filter, ST extends SearchComponentState<T, S>, P extends RouteComponentProps>(p: HookPropsSearchParameter<T, S, ST, P>) => {
+  return useSearch(p.refForm, p.initialState, p.service, p, p);
 };
 export const useSearchOne = <T, S extends Filter, ST extends SearchComponentState<T, S>>(p: HookBaseSearchParameter<T, S, ST>) => {
-  return useCoreSearch(undefined, p.refForm, p.initialState, p.search, p, p);
+  return useCoreSearch(undefined, p.refForm, p.initialState, p.service, p, p);
 };
 export const useCoreSearch = <T, S extends Filter, ST, P>(
   props: P|undefined,
   refForm: any,
   initialState: ST,
-  search: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>,
-  p2: SearchParameter,
-  p1?: SearchComponentParam<T, S>
+  service: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>,
+  p1: SearchParameter,
+  p2?: SearchComponentParam<T, S>
 ) => {
-  mergeParam(p1);
+  const p = mergeParam(p2);
   const [running, setRunning] = useState<boolean>();
 
   const _getModelName = (): string => {
-    return getName('filter', p1 && p1.name ? p1.name : undefined);
+    return getName('filter', p && p.name ? p.name : undefined);
   };
-  const getModelName = (p1 && p1.getModelName ? p1.getModelName : _getModelName);
+  const getModelName = (p && p.getModelName ? p.getModelName : _getModelName);
 
   // const setState2: <K extends keyof S, P>(st: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null), cb?: () => void) => void;
-  const baseProps = (props ? useUpdateWithProps<ST, P>(props, initialState, getModelName, p2.getLocale, getRemoveError(p2), p1 ? p1.prepareCustomData : undefined) : useUpdate<ST>(initialState, getModelName, p2.getLocale, getRemoveError(p2)));
+  const baseProps = (props ? useUpdateWithProps<ST, P>(props, initialState, getModelName, p1.getLocale, getRemoveError(p1), p ? p.prepareCustomData : undefined) : useUpdate<ST>(initialState, getModelName, p1.getLocale, getRemoveError(p1)));
   const { state, setState } = baseProps;
   const [history, match] = [useHistory(), useRouteMatch()];
 
   const _getCurrencyCode = (): string => {
     return refForm && refForm.current ? refForm.current.getAttribute('currency-code') : null;
   };
-  const getCurrencyCode = p1 && p1.getCurrencyCode ? p1.getCurrencyCode : _getCurrencyCode;
+  const getCurrencyCode = p && p.getCurrencyCode ? p.getCurrencyCode : _getCurrencyCode;
 
-  const prepareCustomData = (p1 && p1.prepareCustomData ? p1.prepareCustomData : prepareData);
+  const prepareCustomData = (p && p.prepareCustomData ? p.prepareCustomData : prepareData);
   const updateDateState = (name: string, value: any) => {
     const modelName = getModelName();
     const currentState = (state as any)[modelName];
@@ -219,10 +253,12 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   };
 
   // const p = createSearchComponentState<T, S>(p1);
-  const [component, setComponent] = useMergeState<SearchComponentState<T, S>>(p1);
+  const [component, setComponent] = useMergeState<SearchComponentState<T, S>>(p);
 
-  const toggleFilter = (event: any): void => {
-    setComponent({ hideFilter: !component.hideFilter });
+  const toggleFilter = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+    const x = !component.hideFilter;
+    handleToggle(event.target as HTMLInputElement, !x);
+    setComponent({ hideFilter: x });
   };
 
   const add = (event: any) => {
@@ -236,24 +272,24 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     setComponent({ fields: fs, initFields: true });
     return fs;
   };
-  const getFields = p1 && p1.getFields ? p1.getFields : _getFields;
+  const getFields = p && p.getFields ? p.getFields : _getFields;
 
   const getFilter = (se?: Searchable<T>): S => {
     if (!se) {
       se = component;
     }
-    let keys = p1 && p1.keys ? p1.keys : undefined;
-    if (!keys && typeof search !== 'function' && search.keys) {
-      keys = search.keys();
+    let keys = p && p.keys ? p.keys : undefined;
+    if (!keys && typeof service !== 'function' && service.keys) {
+      keys = service.keys();
     }
     const n = getModelName();
-    let fs = p1 && p1.fields;
+    let fs = p && p.fields;
     if (!fs || fs.length <= 0) {
       fs = getFields();
     }
-    const lc = (p2.getLocale ? p2.getLocale() : enLocale);
+    const lc = (p1.getLocale ? p1.getLocale() : enLocale);
     const cc = getCurrencyCode();
-    const obj3 = getModel<T, S>(state, n, se, fs, se.excluding, keys, se.list, refForm.current, getDecodeFromForm(p2), lc, cc);
+    const obj3 = getModel<T, S>(state, n, se, fs, se.excluding, keys, se.list, refForm.current, getDecodeFromForm(p1), lc, cc);
     return obj3;
   };
   const _setFilter = (s: S): void => {
@@ -263,7 +299,7 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     setState(objSet);
   };
 
-  const setFilter = p1 && p1.setFilter ? p1.setFilter : _setFilter;
+  const setFilter = p && p.setFilter ? p.setFilter : _setFilter;
 
   const _load = (s: S, auto?: boolean): void => {
     const com = Object.assign({}, component);
@@ -277,10 +313,10 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
       }, 0);
     }
   };
-  const load = p1 && p1.load ? p1.load : _load;
+  const load = p && p.load ? p.load : _load;
 
   const doSearch = (se: Searchable<T>, isFirstLoad?: boolean) => {
-    removeFormError(p2, refForm.current);
+    removeFormError(p1, refForm.current);
     const s = getFilter(se);
     const isStillRunning = running;
     validateSearch(s, () => {
@@ -288,23 +324,23 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
         return;
       }
       setRunning(true);
-      showLoading(p2.loading);
-      if (p1 && !p1.ignoreUrlParam) {
+      showLoading(p1.loading);
+      if (p && !p.ignoreUrlParam) {
         addParametersIntoUrl(s, isFirstLoad);
       }
-      const lc = p2.getLocale ? p2.getLocale() : enLocale;
-      if (typeof search === 'function') {
-        callSearch<T, S>(s, search, showResults, searchError, lc, se.nextPageToken);
+      const lc = p1.getLocale ? p1.getLocale() : enLocale;
+      if (typeof service === 'function') {
+        callSearch<T, S>(s, service, showResults, searchError, lc, se.nextPageToken);
       } else {
-        callSearch<T, S>(s, search.search, showResults, searchError, lc, se.nextPageToken);
+        callSearch<T, S>(s, service.search, showResults, searchError, lc, se.nextPageToken);
       }
     });
   };
 
   const _validateSearch = (se: S, callback: () => void) => {
-    validate(se, callback, refForm.current, (p2.getLocale ? p2.getLocale() : undefined), getValidateForm(p2));
+    validate(se, callback, refForm.current, (p1.getLocale ? p1.getLocale() : undefined), getValidateForm(p1));
   };
-  const validateSearch = p1 && p1.validateSearch ? p1.validateSearch : _validateSearch;
+  const validateSearch = p && p.validateSearch ? p.validateSearch : _validateSearch;
 
   const pageSizeChanged = (event: any) => {
     const size = parseInt(event.currentTarget.value, 10);
@@ -333,7 +369,7 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     }
   };
 
-  const searchOnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+  const search = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
     if (event) {
       event.preventDefault();
     }
@@ -394,18 +430,18 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
 
   const searchError = (err: any): void => {
     setComponent({ pageIndex: component.tmpPageIndex });
-    error(err, p2.resource.value, p2.showError);
+    error(err, p1.resource.value, p1.showError);
   };
-  const appendList = (p1 && p1.appendList ? p1.appendList : appendListOfState);
-  const setList = (p1 && p1.setList ? p1.setList : setListOfState);
+  const appendList = (p && p.appendList ? p.appendList : appendListOfState);
+  const setList = (p && p.setList ? p.setList : setListOfState);
   const _showResults = (s: S, sr: SearchResult<T>, lc: Locale) => {
     const results = sr.list;
     if (results && results.length > 0) {
-      formatResults(results, component.pageIndex, component.pageSize, component.initPageSize, p1 ? p1.sequenceNo : undefined, p1 ? p1.format : undefined, lc);
+      formatResults(results, component.pageIndex, component.pageSize, component.pageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
     }
     const am = component.appendMode;
     const pi = (s.page && s.page >= 1 ? s.page : 1);
-    setComponent({ itemTotal: sr.total, pageIndex: pi, nextPageToken: sr.nextPageToken });
+    setComponent({ total: sr.total, pageIndex: pi, nextPageToken: sr.nextPageToken });
     if (am) {
       let limit = s.limit;
       if ((!s.page || s.page <= 1) && s.firstLimit && s.firstLimit > 0) {
@@ -422,18 +458,18 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
       setList(results, setState as any);
       setComponent({ tmpPageIndex: s.page });
       if (s.limit) {
-        const m1 = buildMessage(p2.resource, s.page, s.limit, sr.list, sr.total);
-        p2.showMessage(m1);
+        const m1 = buildMessage(p1.resource, s.page, s.limit, sr.list, sr.total);
+        p1.showMessage(m1);
       }
     }
     setRunning(false);
-    hideLoading(p2.loading);
+    hideLoading(p1.loading);
     if (component.triggerSearch) {
       setComponent({ triggerSearch: false });
       resetAndSearch();
     }
   };
-  const showResults = (p1 && p1.showResults ? p1.showResults : _showResults);
+  const showResults = (p && p.showResults ? p.showResults : _showResults);
 
   const showMore = (event: any) => {
     event.preventDefault();
@@ -446,11 +482,11 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     doSearch(component);
   };
 
-  const pageChanged = (data: any) => {
-    const { currentPage, itemsPerPage } = data;
-    setComponent({ pageIndex: currentPage, pageSize: itemsPerPage, append: false });
-    component.pageIndex = currentPage;
-    component.pageSize = itemsPerPage;
+  const pageChanged = (data: PageChange) => {
+    const { page, size } = data;
+    setComponent({ pageIndex: page, pageSize: size, append: false });
+    component.pageIndex = page;
+    component.pageSize = size;
     component.append = false;
     doSearch(component);
   };
@@ -461,13 +497,13 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     setRunning,
     getCurrencyCode,
     updateDateState,
-    resource: p2.resource.resource(),
+    resource: p1.resource.resource(),
     setComponent,
     component,
-    showMessage: p2.showMessage,
+    showMessage: p1.showMessage,
     load,
     add,
-    searchOnClick,
+    search,
     sort,
     changeView,
     showMore,
@@ -479,6 +515,6 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     showResults,
     getFields,
     getModelName,
-    format: p1 ? p1.format : undefined
+    format: p ? p.format : undefined
   };
 };

package/tsconfig.json

@@ -14,7 +14,8 @@
     "removeComments": true,
     "lib": [
       "dom",
-      "es6"
+      "es6",
+      "es7"
     ]
   },
   "include": [