react-hook-core 0.1.2 → 0.1.3

package/lib/components.js

@@ -305,15 +305,15 @@ var BaseSearchComponent = (function (_super) {
     _this.ui = ui;
     _this.loading = loading;
     _this.listFormId = listFormId;
-    _this.initPageSize = 20;
-    _this.pageSize = 20;
+    _this.initPageSize = 24;
+    _this.pageSize = 24;
     _this.pageIndex = 1;
-    _this.itemTotal = 0;
-    _this.pageTotal = 0;
+    _this.total = 0;
+    _this.pages = 0;
     _this.sequenceNo = 'sequenceNo';
     _this.tmpPageIndex = 1;
     _this.pageMaxSize = 7;
-    _this.pageSizes = [10, 20, 40, 60, 100, 200, 400, 800];
+    _this.pageSizes = core_2.pageSizes;
     _this.viewable = true;
     _this.addable = true;
     _this.editable = true;
@@ -338,7 +338,7 @@ var BaseSearchComponent = (function (_super) {
     _this.getFields = _this.getFields.bind(_this);
     _this.pageSizeChanged = _this.pageSizeChanged.bind(_this);
     _this.clearQ = _this.clearQ.bind(_this);
-    _this.searchOnClick = _this.searchOnClick.bind(_this);
+    _this.search = _this.search.bind(_this);
     _this.resetAndSearch = _this.resetAndSearch.bind(_this);
     _this.doSearch = _this.doSearch.bind(_this);
     _this.call = _this.call.bind(_this);
@@ -421,7 +421,7 @@ var BaseSearchComponent = (function (_super) {
       });
     }
   };
-  BaseSearchComponent.prototype.searchOnClick = function (event) {
+  BaseSearchComponent.prototype.search = function (event) {
     if (event) {
       event.preventDefault();
       if (!this.getSearchForm()) {
@@ -475,12 +475,12 @@ var BaseSearchComponent = (function (_super) {
     var results = sr.list;
     if (results && results.length > 0) {
       var lc = state_1.localeOf(undefined, this.getLocale);
-      search_core_1.formatResultsByComponent(results, com, lc);
+      search_core_1.formatResults(results, com.pageIndex, com.pageSize, com.pageSize, com.sequenceNo, com.format, lc);
     }
     var am = com.appendMode;
     com.pageIndex = (s.page && s.page >= 1 ? s.page : 1);
     if (sr.total) {
-      com.itemTotal = sr.total;
+      com.total = sr.total;
     }
     if (am) {
       var limit = s.limit;
@@ -558,8 +558,8 @@ var BaseSearchComponent = (function (_super) {
     this.doSearch();
   };
   BaseSearchComponent.prototype.pageChanged = function (data) {
-    var currentPage = data.currentPage, itemsPerPage = data.itemsPerPage;
-    search_core_1.changePage(this, currentPage, itemsPerPage);
+    var page = data.page, size = data.size;
+    search_core_1.changePage(this, page, size);
     this.doSearch();
   };
   return BaseSearchComponent;
@@ -578,10 +578,10 @@ var SearchComponent = (function (_super) {
     if (sv) {
       if (typeof sv === 'function') {
         var x = sv;
-        _this.search = x;
+        _this.service = x;
       }
       else {
-        _this.search = sv.search;
+        _this.service = sv.search;
         if (sv.keys) {
           _this.keys = sv.keys();
         }
@@ -634,8 +634,8 @@ var SearchComponent = (function (_super) {
     delete se['firstLimit'];
     core_1.showLoading(this.loading);
     var com = this;
-    if (this.search) {
-      this.search(s, limit, next, fields).then(function (sr) {
+    if (this.service) {
+      this.service(s, limit, next, fields).then(function (sr) {
         com.showResults(s, sr);
         com.running = undefined;
         core_1.hideLoading(com.loading);
@@ -663,7 +663,7 @@ var BaseEditComponent = (function (_super) {
     _this.backOnSuccess = true;
     _this.patchable = true;
     _this.addable = true;
-    _this.newOnClick = function (event) {
+    _this.create = function (event) {
       if (event) {
         event.preventDefault();
       }
@@ -680,7 +680,7 @@ var BaseEditComponent = (function (_super) {
         }, 100);
       }
     };
-    _this.saveOnClick = function (event) {
+    _this.save = function (event) {
       event.preventDefault();
       event.persist();
       if (!_this.form && event && event.target) {
@@ -708,11 +708,11 @@ var BaseEditComponent = (function (_super) {
     _this.showModel = _this.showModel.bind(_this);
     _this.getModel = _this.getModel.bind(_this);
     _this.createModel = _this.createModel.bind(_this);
-    _this.newOnClick = _this.newOnClick.bind(_this);
-    _this.saveOnClick = _this.saveOnClick.bind(_this);
+    _this.create = _this.create.bind(_this);
+    _this.save = _this.save.bind(_this);
     _this.onSave = _this.onSave.bind(_this);
     _this.validate = _this.validate.bind(_this);
-    _this.save = _this.save.bind(_this);
+    _this.doSave = _this.doSave.bind(_this);
     _this.succeed = _this.succeed.bind(_this);
     _this.fail = _this.fail.bind(_this);
     _this.postSave = _this.postSave.bind(_this);
@@ -792,7 +792,7 @@ var BaseEditComponent = (function (_super) {
         com_2.validate(obj_1, function () {
           var msg = core_2.message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
           _this.confirm(msg.message, msg.title, function () {
-            com_2.save(obj_1, obj_1, isBack);
+            com_2.doSave(obj_1, obj_1, isBack);
           }, msg.no, msg.yes);
         });
       }
@@ -806,7 +806,7 @@ var BaseEditComponent = (function (_super) {
           com_2.validate(obj_1, function () {
             var msg = core_2.message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
             _this.confirm(msg.message, msg.title, function () {
-              com_2.save(obj_1, diffObj_1, isBack);
+              com_2.doSave(obj_1, diffObj_1, isBack);
             }, msg.no, msg.yes);
           });
         }
@@ -824,7 +824,7 @@ var BaseEditComponent = (function (_super) {
       callback(obj);
     }
   };
-  BaseEditComponent.prototype.save = function (obj, dif, isBack) {
+  BaseEditComponent.prototype.doSave = function (obj, dif, isBack) {
   };
   BaseEditComponent.prototype.succeed = function (msg, isBack, result) {
     if (result) {
@@ -947,7 +947,7 @@ var EditComponent = (function (_super) {
       _this.keys = [];
     }
     _this.load = _this.load.bind(_this);
-    _this.save = _this.save.bind(_this);
+    _this.doSave = _this.doSave.bind(_this);
     _this.componentDidMount = _this.componentDidMount.bind(_this);
     _this.ref = React.createRef();
     return _this;
@@ -1017,7 +1017,7 @@ var EditComponent = (function (_super) {
       }
     }
   };
-  EditComponent.prototype.save = function (obj, body, isBack) {
+  EditComponent.prototype.doSave = function (obj, body, isBack) {
     this.running = true;
     core_1.showLoading(this.loading);
     var isBackO = (isBack == null || isBack === undefined ? this.backOnSuccess : isBack);

package/lib/core.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var formutil_1 = require("./formutil");
+exports.pageSizes = [12, 24, 60, 100, 120, 180, 300, 600];
 function createEditStatus(status) {
   if (status) {
     return status;

package/lib/index.js

@@ -2,7 +2,23 @@
 function __export(m) {
   for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
-Object.defineProperty(exports, "__esModule", { value: true });var React = require("react");__export(require("./formutil"));__export(require("./util"));__export(require("./core"));__export(require("./state"));__export(require("./edit"));__export(require("./route"));__export(require("./components"));__export(require("./diff"));__export(require("./router"));__export(require("./merge"));__export(require("./update"));__export(require("./useView"));__export(require("./useEdit"));__export(require("./useSearch"));__export(require("./useMessage"));
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+__export(require("./formutil"));
+__export(require("./util"));
+__export(require("./core"));
+__export(require("./state"));
+__export(require("./edit"));
+__export(require("./route"));
+__export(require("./components"));
+__export(require("./diff"));
+__export(require("./router"));
+__export(require("./merge"));
+__export(require("./update"));
+__export(require("./useView"));
+__export(require("./useEdit"));
+__export(require("./useSearch"));
+__export(require("./useMessage"));
 exports.withDefaultProps = function (Component) {
   return function (props) {
     return React.createElement(Component, { props: props, history: props.history });
@@ -17,9 +33,9 @@ exports.Loading = function (props) {
     'boxShadow': 'none'
   };
   if (props.error) {
-    return React.createElement("div", null, "Error Load Module!");
+    return React.createElement('div', null, 'Error Load Module!');
   }
   else {
-    return (React.createElement("div", { className: 'loader-wrapper' }, React.createElement("div", { className: 'loader-sign', style: loadingStyle }, React.createElement("div", { className: 'loader' }))));
+    return (React.createElement('div', { className: 'loader-wrapper' }, React.createElement('div', { className: 'loader-sign', style: loadingStyle }, React.createElement('div', { className: 'loader' }))));
   }
 };

package/lib/useEdit.js

@@ -145,7 +145,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
     }
   };
   var createModel = (p && p.createModel ? p.createModel : _createModel);
-  var newOnClick = function (event) {
+  var create = function (event) {
     event.preventDefault();
     var obj = createModel();
     resetState(true, obj, undefined);
@@ -184,7 +184,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
         validate(obj_1, function () {
           var msg = core_1.message(p1.resource.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
           p1.confirm(msg.message, msg.title, function () {
-            save(obj_1, undefined, version_1, isBack);
+            doSave(obj_1, undefined, version_1, isBack);
           }, msg.no, msg.yes);
         });
       }
@@ -198,7 +198,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
           validate(obj_1, function () {
             var msg = core_1.message(p1.resource.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
             p1.confirm(msg.message, msg.title, function () {
-              save(obj_1, diffObj_1, version_1, isBack);
+              doSave(obj_1, diffObj_1, version_1, isBack);
             }, msg.no, msg.yes);
           });
         }
@@ -206,7 +206,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
     }
   };
   var onSave = (p && p.onSave ? p.onSave : _onSave);
-  var saveOnClick = function (event) {
+  var save = function (event) {
     event.preventDefault();
     event.persist();
     onSave();
@@ -319,7 +319,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
     p1.showError(msg.message, msg.title);
   };
   var handleDuplicateKey = (p && p.handleDuplicateKey ? p.handleDuplicateKey : _handleDuplicateKey);
-  var _save = function (obj, body, version, isBack) {
+  var _doSave = function (obj, body, version, isBack) {
     setRunning(true);
     core_1.showLoading(p1.loading);
     var isBackO = (isBack == null || isBack === undefined ? true : isBack);
@@ -336,7 +336,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
       service.insert(obj).then(function (result) { return postSave(obj, result, version, isBackO); });
     }
   };
-  var save = (p && p.save ? p.save : _save);
+  var doSave = (p && p.doSave ? p.doSave : _doSave);
   var _load = function (_id, callback) {
     var id = _id;
     if (id != null && id !== '') {
@@ -400,8 +400,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
     getModelName: getModelName,
     resetState: resetState,
     handleNotFound: handleNotFound,
-    getModel: getModel, createNewModel: createModel, newOnClick: newOnClick,
-    saveOnClick: saveOnClick,
+    getModel: getModel, createNewModel: createModel, newOnClick: create, save: save,
     onSave: onSave,
     confirm: confirm,
     validate: validate, showMessage: p1.showMessage, succeed: succeed,
@@ -409,6 +408,6 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
     postSave: postSave,
     handleDuplicateKey: handleDuplicateKey,
     load: load,
-    save: save
+    doSave: doSave
   });
 };

package/lib/useSearch.js

@@ -30,7 +30,7 @@ exports.callSearch = function (se, search3, showResults3, searchError3, lc, next
   }
   var offset;
   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;
@@ -56,17 +56,16 @@ var appendListOfState = function (results, list, setState2) {
 var setListOfState = function (list, setState2) {
   setState2({ list: list });
 };
-exports.pageSizes = [10, 20, 40, 60, 100, 200, 400, 800];
 function mergeParam(p) {
   if (p) {
     if (!p.sequenceNo) {
       p.sequenceNo = 'sequenceNo';
     }
     if (!p.pageSize) {
-      p.pageSize = 20;
+      p.pageSize = 24;
     }
     if (!p.pageSizes) {
-      p.pageSizes = exports.pageSizes;
+      p.pageSizes = core_1.pageSizes;
     }
     if (!p.pageMaxSize || p.pageMaxSize <= 0) {
       p.pageMaxSize = 7;
@@ -76,15 +75,14 @@ function mergeParam(p) {
   else {
     return {
       sequenceNo: 'sequenceNo',
-      pageSize: 20,
-      pageSizes: exports.pageSizes,
+      pageSize: 24,
+      pageSizes: core_1.pageSizes,
       pageMaxSize: 7
     };
   }
 }
-exports.useSearch = function (refForm, initialState, search, p2, p) {
-  debugger;
-  var baseProps = exports.useCoreSearch(undefined, refForm, initialState, search, p2, p);
+exports.useSearch = function (refForm, initialState, service, p2, p) {
+  var baseProps = exports.useCoreSearch(undefined, refForm, initialState, service, p2, p);
   react_1.useEffect(function () {
     var load = baseProps.load, setState = baseProps.setState, component = baseProps.component;
     if (refForm) {
@@ -103,12 +101,12 @@ exports.useSearch = function (refForm, initialState, search, p2, p) {
   return __assign({}, baseProps);
 };
 exports.useSearchOneProps = function (p) {
-  return exports.useSearch(p.refForm, p.initialState, p.search, p, p);
+  return exports.useSearch(p.refForm, p.initialState, p.service, p, p);
 };
 exports.useSearchOne = function (p) {
-  return exports.useCoreSearch(undefined, p.refForm, p.initialState, p.search, p, p);
+  return exports.useCoreSearch(undefined, p.refForm, p.initialState, p.service, p, p);
 };
-exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2) {
+exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2) {
   var p = mergeParam(p2);
   var _a = react_1.useState(), running = _a[0], setRunning = _a[1];
   var _getModelName = function () {
@@ -156,8 +154,8 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2)
       se = component;
     }
     var keys = p && p.keys ? p.keys : undefined;
-    if (!keys && typeof search !== 'function' && search.keys) {
-      keys = search.keys();
+    if (!keys && typeof service !== 'function' && service.keys) {
+      keys = service.keys();
     }
     var n = getModelName();
     var fs = p && p.fields;
@@ -203,11 +201,11 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2)
         search_core_1.addParametersIntoUrl(s, isFirstLoad);
       }
       var lc = p1.getLocale ? p1.getLocale() : state_1.enLocale;
-      if (typeof search === 'function') {
-        exports.callSearch(s, search, showResults, searchError, lc, se.nextPageToken);
+      if (typeof service === 'function') {
+        exports.callSearch(s, service, showResults, searchError, lc, se.nextPageToken);
       }
       else {
-        exports.callSearch(s, search.search, showResults, searchError, lc, se.nextPageToken);
+        exports.callSearch(s, service.search, showResults, searchError, lc, se.nextPageToken);
       }
     });
   };
@@ -240,7 +238,7 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2)
       }
     }
   };
-  var searchOnClick = function (event) {
+  var search = function (event) {
     if (event) {
       event.preventDefault();
     }
@@ -307,11 +305,12 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2)
   var _showResults = function (s, sr, lc) {
     var results = sr.list;
     if (results && results.length > 0) {
-      search_core_1.formatResults(results, component.pageIndex, component.pageSize, component.initPageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
+      debugger;
+      search_core_1.formatResults(results, component.pageIndex, component.pageSize, component.pageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
     }
     var am = component.appendMode;
     var 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) {
       var limit = s.limit;
       if ((!s.page || s.page <= 1) && s.firstLimit && s.firstLimit > 0) {
@@ -353,10 +352,10 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2)
     doSearch(component);
   };
   var pageChanged = function (data) {
-    var currentPage = data.currentPage, itemsPerPage = data.itemsPerPage;
-    setComponent({ pageIndex: currentPage, pageSize: itemsPerPage, append: false });
-    component.pageIndex = currentPage;
-    component.pageSize = itemsPerPage;
+    var page = data.page, size = data.size;
+    setComponent({ pageIndex: page, pageSize: size, append: false });
+    component.pageIndex = page;
+    component.pageSize = size;
     component.append = false;
     doSearch(component);
   };
@@ -366,9 +365,7 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2)
     getCurrencyCode: getCurrencyCode,
     updateDateState: updateDateState, resource: p1.resource.resource(), setComponent: setComponent,
     component: component, showMessage: p1.showMessage, load: load,
-    add: add,
-    searchOnClick: searchOnClick,
-    sort: sort,
+    add: add, searchOnClick: search, sort: sort,
     changeView: changeView,
     showMore: showMore,
     toggleFilter: toggleFilter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-core",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "react",
   "main": "./lib/index.js",
   "types": "./src/index.ts",
@@ -15,7 +15,7 @@
     "react": "^16.8.0",
     "react-router-dom": "^5.2.0",
     "reflectx": "^0.0.10",
-    "search-core": "^0.1.0",
+    "search-core": "^0.1.1",
     "tslint": "^5.10.0",
     "typescript": "^3.3.3333"
   },

package/src/components.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {RouteComponentProps} from 'react-router';
 import {clone, diff, makeDiff} from 'reflectx';
-import {addParametersIntoUrl, append, buildMessage, changePage, changePageSize, formatResultsByComponent, getFieldsFromForm, getModel, handleAppend, handleSortEvent, initFilter, mergeFilter as mergeFilter2, more, reset, Searchable, showPaging, validate} from 'search-core';
+import {addParametersIntoUrl, append, buildMessage, changePage, changePageSize, formatResults, getFieldsFromForm, getModel, handleAppend, handleSortEvent, initFilter, mergeFilter as mergeFilter2, more, reset, Searchable, showPaging, validate} from 'search-core';
 import {BaseDiffState, createDiffStatus, createEditStatus, DiffApprService, DiffParameter, DiffState, DiffStatusConfig, hideLoading, showLoading} from './core';
-import {Attributes, buildId, EditStatusConfig, error, ErrorMessage, Filter, getCurrencyCode, getModelName as getModelName2, initForm, LoadingService, Locale, message, messageByHttpStatus, removePhoneFormat, ResourceService, SearchParameter, SearchResult, SearchService, SearchState, StringMap, UIService, ViewParameter, ViewService} from './core';
+import {Attributes, buildId, EditStatusConfig, error, ErrorMessage, Filter, getCurrencyCode, getModelName as getModelName2, initForm, LoadingService, Locale, message, messageByHttpStatus, PageChange, pageSizes, removePhoneFormat, ResourceService, SearchParameter, SearchResult, SearchService, SearchState, StringMap, UIService, ViewParameter, ViewService} from './core';
 import {formatDiffModel, getDataFields} from './diff';
 import {build, createModel as createModel2, EditParameter, GenericService, handleStatus, handleVersion, initPropertyNullInModel, ResultInfo} from './edit';
 import {focusFirstError, readOnly} from './formutil';
@@ -291,7 +291,7 @@ export class MessageComponent<S extends MessageOnlyState, P> extends BaseCompone
     this.setState({ message: '' });
   }
 }
-export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T, S>> extends BaseComponent<P, I> implements Searchable {
+export class BaseSearchComponent<T, F extends Filter, P, I extends SearchState<T, F>> extends BaseComponent<P, I> implements Searchable {
   constructor(props: P,
       protected resourceService: ResourceService,
       protected showMessage: (msg: string) => void,
@@ -315,7 +315,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
 
     this.pageSizeChanged = this.pageSizeChanged.bind(this);
     this.clearQ = this.clearQ.bind(this);
-    this.searchOnClick = this.searchOnClick.bind(this);
+    this.search = this.search.bind(this);
 
     this.resetAndSearch = this.resetAndSearch.bind(this);
     this.doSearch = this.doSearch.bind(this);
@@ -341,14 +341,14 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
   resource: StringMap;
   url: string;
 
-  filter?: S;
+  filter?: F;
   // Pagination
-  initPageSize = 20;
-  pageSize = 20;
+  initPageSize = 24;
+  pageSize = 24;
   pageIndex?: number = 1;
   nextPageToken?: string;
-  itemTotal = 0;
-  pageTotal = 0;
+  total = 0;
+  pages = 0;
   showPaging?: boolean;
   append?: boolean;
   appendMode?: boolean;
@@ -368,7 +368,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
   tmpPageIndex?: number = 1;
 
   pageMaxSize = 7;
-  pageSizes: number[] = [10, 20, 40, 60, 100, 200, 400, 800];
+  pageSizes: number[] = pageSizes;
 
   list?: T[];
   excluding?: string[]|number[];
@@ -391,7 +391,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
   toggleFilter(event: any): void {
     this.hideFilter = !this.hideFilter;
   }
-  load(s: S, autoSearch: boolean): void {
+  load(s: F, autoSearch: boolean): void {
     const obj2 = initFilter(s, this);
     this.setFilter(obj2);
     const com = this;
@@ -412,7 +412,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
     }
     return this.form;
   }
-  setFilter(filter: S): void {
+  setFilter(filter: F): void {
     const modelName = this.getModelName();
     const objSet: any = {};
     objSet[modelName] = filter;
@@ -421,7 +421,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
   getCurrencyCode(): string|undefined {
     return getCurrencyCode(this.form);
   }
-  getFilter(): S {
+  getFilter(): F {
     const name = this.getModelName();
     let lc: Locale|undefined;
     if (this.getLocale) {
@@ -435,7 +435,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
     const l = this.getList();
     const f = this.getSearchForm();
     const dc = (this.ui ? this.ui.decodeFromForm : undefined);
-    const obj3 = getModel<T, S>(this.state, name, this, fields, this.excluding, this.keys, l, f, dc, lc, cc);
+    const obj3 = getModel<T, F>(this.state, name, this, fields, this.excluding, this.keys, l, f, dc, lc, cc);
     return obj3;
   }
   getFields(): string[]|undefined {
@@ -464,7 +464,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
       });
     }
   }
-  searchOnClick(event: any): void {
+  search(event: any): void {
     if (event) {
       event.preventDefault();
       if (!this.getSearchForm()) {
@@ -508,26 +508,27 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
     });
   }
 
-  call(s: S): void {
+  call(s: F): void {
 
   }
 
-  validateSearch(se: S, callback: () => void): void {
+  validateSearch(se: F, callback: () => void): void {
     const u = this.ui;
     const vl = (u ? u.validateForm : undefined);
     validate(se, callback, this.getSearchForm(), localeOf(undefined, this.getLocale), vl);
   }
-  showResults(s: S, sr: SearchResult<T>) {
+  showResults(s: F, sr: SearchResult<T>) {
     const com = this;
     const results = sr.list;
     if (results && results.length > 0) {
       const lc = localeOf(undefined, this.getLocale);
-      formatResultsByComponent(results, com, lc);
+      // formatResultsByComponent(results, com, lc);
+      formatResults(results, com.pageIndex, com.pageSize, com.pageSize, com.sequenceNo, com.format, lc);
     }
     const am = com.appendMode;
     com.pageIndex = (s.page && s.page >= 1 ? s.page : 1);
     if (sr.total) {
-      com.itemTotal = sr.total;
+      com.total = sr.total;
     }
     if (am) {
       let limit = s.limit;
@@ -609,9 +610,9 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
     this.doSearch();
   }
 
-  pageChanged(data: any) {
-    const { currentPage, itemsPerPage } = data;
-    changePage(this, currentPage, itemsPerPage);
+  pageChanged(data: PageChange) {
+    const { page, size } = data;
+    changePage(this, page, size);
     this.doSearch();
   }
 }
@@ -629,9 +630,9 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
     if (sv) {
       if (typeof sv === 'function') {
         const x: any = sv;
-        this.search = x;
+        this.service = x;
       } else {
-        this.search = sv.search;
+        this.service = sv.search;
         if (sv.keys) {
           this.keys = sv.keys();
         }
@@ -646,7 +647,7 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
     this.ref = React.createRef();
   }
   protected showError: (m: string, header?: string, detail?: string, callback?: () => void) => void;
-  protected search?: (s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>;
+  protected service?: (s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>;
   // protected service: SearchService<T, S>;
   protected ref: any;
   protected autoSearch: boolean;
@@ -692,8 +693,8 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
     delete se['firstLimit'];
     showLoading(this.loading);
     const com = this;
-    if (this.search) {
-      this.search(s, limit, next, fields).then(sr => {
+    if (this.service) {
+      this.service(s, limit, next, fields).then(sr => {
         com.showResults(s, sr);
         com.running = undefined;
         hideLoading(com.loading);
@@ -743,11 +744,11 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     this.getModel = this.getModel.bind(this);
     this.createModel = this.createModel.bind(this);
 
-    this.newOnClick = this.newOnClick.bind(this);
-    this.saveOnClick = this.saveOnClick.bind(this);
+    this.create = this.create.bind(this);
+    this.save = this.save.bind(this);
     this.onSave = this.onSave.bind(this);
     this.validate = this.validate.bind(this);
-    this.save = this.save.bind(this);
+    this.doSave = this.doSave.bind(this);
     this.succeed = this.succeed.bind(this);
     this.fail = this.fail.bind(this);
     this.postSave = this.postSave.bind(this);
@@ -822,7 +823,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     }
   }
 
-  newOnClick = (event: any) => {
+  create = (event: any) => {
     if (event) {
       event.preventDefault();
     }
@@ -839,7 +840,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
       }, 100);
     }
   }
-  saveOnClick = (event: any) => {
+  save = (event: any) => {
     event.preventDefault();
     (event as any).persist();
     if (!this.form && event && event.target) {
@@ -867,7 +868,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
         com.validate(obj, () => {
           const msg = message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
           this.confirm(msg.message, msg.title, () => {
-            com.save(obj, obj, isBack);
+            com.doSave(obj, obj, isBack);
           }, msg.no, msg.yes);
         });
       } else {
@@ -879,7 +880,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
           com.validate(obj, () => {
             const msg = message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
             this.confirm(msg.message, msg.title, () => {
-              com.save(obj, diffObj, isBack);
+              com.doSave(obj, diffObj, isBack);
             }, msg.no, msg.yes);
           });
         }
@@ -897,7 +898,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     }
   }
 
-  save(obj: T, dif?: T, isBack?: boolean) {
+  doSave(obj: T, dif?: T, isBack?: boolean) {
   }
 
   succeed(msg: string, isBack?: boolean, result?: ResultInfo<T>) {
@@ -1013,7 +1014,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
       this.keys = [];
     }
     this.load = this.load.bind(this);
-    this.save = this.save.bind(this);
+    this.doSave = this.doSave.bind(this);
     this.componentDidMount = this.componentDidMount.bind(this);
     this.ref = React.createRef();
   }
@@ -1078,7 +1079,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
       }
     }
   }
-  save(obj: T, body?: T, isBack?: boolean) {
+  doSave(obj: T, body?: T, isBack?: boolean) {
     this.running = true;
     showLoading(this.loading);
     const isBackO = (isBack == null || isBack === undefined ? this.backOnSuccess : isBack);

package/src/core.ts

@@ -1,9 +1,14 @@
 import {RouteComponentProps} from 'react-router';
 import {focusFirstElement} from './formutil';
 
+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;

package/src/index.ts

@@ -32,9 +32,9 @@ export const Loading = (props: LoadingProps) => {
     'boxShadow': 'none'
   };
   if (props.error) {
-    return React.createElement("div", null, "Error Load Module!");// return (<div>Error Load Module!</div>);
+    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 (React.createElement('div', { className: 'loader-wrapper' }, React.createElement('div', { className: 'loader-sign', style: loadingStyle }, React.createElement('div', { className: 'loader' }))));
     /*
     return (
       <div className='loader-wrapper'>

package/src/useEdit.ts

@@ -41,7 +41,7 @@ export interface BaseEditComponentParam<T, ID> {
   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;
+  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> {
@@ -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,7 +402,7 @@ 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 id: any = _id;
@@ -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

@@ -3,7 +3,7 @@ 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, Locale, removeFormError, ResourceService, SearchParameter, SearchResult, SearchService, showLoading} from './core';
+import {error, getDecodeFromForm, getName, getRemoveError, getValidateForm, 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';
@@ -24,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;
@@ -95,7 +95,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;
@@ -131,7 +131,6 @@ 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>): SearchComponentParam<T, S> {
   if (p) {
@@ -139,7 +138,7 @@ function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): Search
       p.sequenceNo = 'sequenceNo';
     }
     if (!p.pageSize) {
-      p.pageSize = 20;
+      p.pageSize = 24;
     }
     if (!p.pageSizes) {
       p.pageSizes = pageSizes;
@@ -151,7 +150,7 @@ function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): Search
   } else {
     return {
       sequenceNo: 'sequenceNo',
-      pageSize: 20,
+      pageSize: 24,
       pageSizes,
       pageMaxSize: 7
     };
@@ -160,12 +159,11 @@ function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): Search
 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>,
 ) => {
-  debugger;
-  const baseProps = useCoreSearch(undefined, refForm, initialState, search, p2, p);
+  const baseProps = useCoreSearch(undefined, refForm, initialState, service, p2, p);
 
   useEffect(() => {
     const { load, setState, component } = baseProps;
@@ -184,16 +182,16 @@ 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 extends RouteComponentProps>(p: HookPropsSearchParameter<T, S, ST, P>) => {
-  return useSearch(p.refForm, p.initialState, p.search, p, 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>,
+  service: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>,
   p1: SearchParameter,
   p2?: SearchComponentParam<T, S>
 ) => {
@@ -253,8 +251,8 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
       se = component;
     }
     let keys = p && p.keys ? p.keys : undefined;
-    if (!keys && typeof search !== 'function' && search.keys) {
-      keys = search.keys();
+    if (!keys && typeof service !== 'function' && service.keys) {
+      keys = service.keys();
     }
     const n = getModelName();
     let fs = p && p.fields;
@@ -303,10 +301,10 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
         addParametersIntoUrl(s, isFirstLoad);
       }
       const lc = p1.getLocale ? p1.getLocale() : enLocale;
-      if (typeof search === 'function') {
-        callSearch<T, S>(s, search, showResults, searchError, lc, se.nextPageToken);
+      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);
       }
     });
   };
@@ -343,7 +341,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();
     }
@@ -411,11 +409,12 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   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, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
+      debugger;
+      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) {
@@ -456,11 +455,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);
   };
@@ -477,7 +476,7 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     showMessage: p1.showMessage,
     load,
     add,
-    searchOnClick,
+    searchOnClick: search,
     sort,
     changeView,
     showMore,