react-hook-core 0.1.1 → 0.1.2

package/lib/components.js

@@ -317,11 +317,6 @@ var BaseSearchComponent = (function (_super) {
     _this.viewable = true;
     _this.addable = true;
     _this.editable = true;
-    _this.add = function (event) {
-      event.preventDefault();
-      var url = _this.props['props'].match.url + '/add';
-      _this.props.history.push(url);
-    };
     _this.pageSizeOnClick = function () {
       _this.setState(function (prevState) { return ({ isPageSizeOpenDropDown: !prevState.isPageSizeOpenDropDown }); });
     };
@@ -336,7 +331,6 @@ var BaseSearchComponent = (function (_super) {
     _this.showMessage = _this.showMessage.bind(_this);
     _this.toggleFilter = _this.toggleFilter.bind(_this);
     _this.load = _this.load.bind(_this);
-    _this.add = _this.add.bind(_this);
     _this.getSearchForm = _this.getSearchForm.bind(_this);
     _this.setSearchForm = _this.setSearchForm.bind(_this);
     _this.setFilter = _this.setFilter.bind(_this);
@@ -355,7 +349,8 @@ var BaseSearchComponent = (function (_super) {
     _this.sort = _this.sort.bind(_this);
     _this.showMore = _this.showMore.bind(_this);
     _this.pageChanged = _this.pageChanged.bind(_this);
-    _this.url = (props.match ? props.match.url : props['props'].match.url);
+    var currentUrl = window.location.host + window.location.pathname;
+    _this.url = removeUrlParams(currentUrl);
     return _this;
   }
   BaseSearchComponent.prototype.getModelName = function () {
@@ -384,7 +379,10 @@ var BaseSearchComponent = (function (_super) {
     return this.form;
   };
   BaseSearchComponent.prototype.setFilter = function (filter) {
-    this.setState(filter);
+    var modelName = this.getModelName();
+    var objSet = {};
+    objSet[modelName] = filter;
+    this.setState(objSet);
   };
   BaseSearchComponent.prototype.getCurrencyCode = function () {
     return core_2.getCurrencyCode(this.form);
@@ -571,6 +569,11 @@ var SearchComponent = (function (_super) {
   __extends(SearchComponent, _super);
   function SearchComponent(props, sv, param, showMessage, showError, getLocale, uis, loading, listFormId) {
     var _this = _super.call(this, props, input_1.getResource(param), input_1.getMsgFunc(param, showMessage), input_1.getLocaleFunc(param, getLocale), input_1.getUIService(param, uis), input_1.getLoadingFunc(param, loading), listFormId) || this;
+    _this.add = function (event) {
+      event.preventDefault();
+      var url = _this.url + '/add';
+      _this.props.history.push(url);
+    };
     _this.autoSearch = input_1.getAutoSearch(param);
     if (sv) {
       if (typeof sv === 'function') {
@@ -584,6 +587,7 @@ var SearchComponent = (function (_super) {
         }
       }
     }
+    _this.add = _this.add.bind(_this);
     _this.call = _this.call.bind(_this);
     _this.showError = input_1.getErrorFunc(param, showError);
     _this.componentDidMount = _this.componentDidMount.bind(_this);
@@ -1254,3 +1258,8 @@ var DiffApprComponent = (function (_super) {
   return DiffApprComponent;
 }(BaseDiffApprComponent));
 exports.DiffApprComponent = DiffApprComponent;
+function removeUrlParams(url) {
+  var startParams = url.indexOf('?');
+  return startParams !== -1 ? url.substring(0, startParams) : url;
+}
+exports.removeUrlParams = removeUrlParams;

package/lib/index.js

@@ -2,25 +2,24 @@
 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 });
   };
 };
+exports.Loading = function (props) {
+  var loadingStyle = {
+    top: '30%',
+    backgroundColor: 'white',
+    border: 'none',
+    'WebkitBoxShadow': 'none',
+    'boxShadow': 'none'
+  };
+  if (props.error) {
+    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' }))));
+  }
+};

package/lib/useSearch.js

@@ -71,9 +71,19 @@ function mergeParam(p) {
     if (!p.pageMaxSize || p.pageMaxSize <= 0) {
       p.pageMaxSize = 7;
     }
+    return p;
+  }
+  else {
+    return {
+      sequenceNo: 'sequenceNo',
+      pageSize: 20,
+      pageSizes: exports.pageSizes,
+      pageMaxSize: 7
+    };
   }
 }
 exports.useSearch = function (refForm, initialState, search, p2, p) {
+  debugger;
   var baseProps = exports.useCoreSearch(undefined, refForm, initialState, search, p2, p);
   react_1.useEffect(function () {
     var load = baseProps.load, setState = baseProps.setState, component = baseProps.component;
@@ -98,21 +108,21 @@ exports.useSearchOneProps = function (p) {
 exports.useSearchOne = function (p) {
   return exports.useCoreSearch(undefined, p.refForm, p.initialState, p.search, p, p);
 };
-exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1) {
-  mergeParam(p1);
+exports.useCoreSearch = function (props, refForm, initialState, search, p1, p2) {
+  var p = mergeParam(p2);
   var _a = react_1.useState(), running = _a[0], setRunning = _a[1];
   var _getModelName = function () {
-    return core_1.getName('filter', p1 && p1.name ? p1.name : undefined);
+    return core_1.getName('filter', p && p.name ? p.name : undefined);
   };
-  var getModelName = (p1 && p1.getModelName ? p1.getModelName : _getModelName);
-  var baseProps = (props ? update_1.useUpdateWithProps(props, initialState, getModelName, p2.getLocale, core_1.getRemoveError(p2), p1 ? p1.prepareCustomData : undefined) : update_1.useUpdate(initialState, getModelName, p2.getLocale, core_1.getRemoveError(p2)));
+  var getModelName = (p && p.getModelName ? p.getModelName : _getModelName);
+  var baseProps = (props ? update_1.useUpdateWithProps(props, initialState, getModelName, p1.getLocale, core_1.getRemoveError(p1), p ? p.prepareCustomData : undefined) : update_1.useUpdate(initialState, getModelName, p1.getLocale, core_1.getRemoveError(p1)));
   var state = baseProps.state, setState = baseProps.setState;
   var _b = [react_router_dom_1.useHistory(), react_router_dom_1.useRouteMatch()], history = _b[0], match = _b[1];
   var _getCurrencyCode = function () {
     return refForm && refForm.current ? refForm.current.getAttribute('currency-code') : null;
   };
-  var getCurrencyCode = p1 && p1.getCurrencyCode ? p1.getCurrencyCode : _getCurrencyCode;
-  var prepareCustomData = (p1 && p1.prepareCustomData ? p1.prepareCustomData : prepareData);
+  var getCurrencyCode = p && p.getCurrencyCode ? p.getCurrencyCode : _getCurrencyCode;
+  var prepareCustomData = (p && p.prepareCustomData ? p.prepareCustomData : prepareData);
   var updateDateState = function (name, value) {
     var _a, _b, _c, _d, _e, _f, _g;
     var modelName = getModelName();
@@ -126,7 +136,7 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
     }
     setState((_f = {}, _f[modelName] = __assign(__assign({}, currentState), (_g = {}, _g[name] = value, _g)), _f));
   };
-  var _c = merge_1.useMergeState(p1), component = _c[0], setComponent = _c[1];
+  var _c = merge_1.useMergeState(p), component = _c[0], setComponent = _c[1];
   var toggleFilter = function (event) {
     setComponent({ hideFilter: !component.hideFilter });
   };
@@ -140,23 +150,23 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
     setComponent({ fields: fs, initFields: true });
     return fs;
   };
-  var getFields = p1 && p1.getFields ? p1.getFields : _getFields;
+  var getFields = p && p.getFields ? p.getFields : _getFields;
   var getFilter = function (se) {
     if (!se) {
       se = component;
     }
-    var keys = p1 && p1.keys ? p1.keys : undefined;
+    var keys = p && p.keys ? p.keys : undefined;
     if (!keys && typeof search !== 'function' && search.keys) {
       keys = search.keys();
     }
     var n = getModelName();
-    var fs = p1 && p1.fields;
+    var fs = p && p.fields;
     if (!fs || fs.length <= 0) {
       fs = getFields();
     }
-    var lc = (p2.getLocale ? p2.getLocale() : state_1.enLocale);
+    var lc = (p1.getLocale ? p1.getLocale() : state_1.enLocale);
     var cc = getCurrencyCode();
-    var obj3 = search_core_1.getModel(state, n, se, fs, se.excluding, keys, se.list, refForm.current, core_1.getDecodeFromForm(p2), lc, cc);
+    var obj3 = search_core_1.getModel(state, n, se, fs, se.excluding, keys, se.list, refForm.current, core_1.getDecodeFromForm(p1), lc, cc);
     return obj3;
   };
   var _setFilter = function (s) {
@@ -165,7 +175,7 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
     objSet[n] = s;
     setState(objSet);
   };
-  var setFilter = p1 && p1.setFilter ? p1.setFilter : _setFilter;
+  var setFilter = p && p.setFilter ? p.setFilter : _setFilter;
   var _load = function (s, auto) {
     var com = Object.assign({}, component);
     var obj2 = search_core_1.initFilter(s, com);
@@ -178,9 +188,9 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
       }, 0);
     }
   };
-  var load = p1 && p1.load ? p1.load : _load;
+  var load = p && p.load ? p.load : _load;
   var doSearch = function (se, isFirstLoad) {
-    core_1.removeFormError(p2, refForm.current);
+    core_1.removeFormError(p1, refForm.current);
     var s = getFilter(se);
     var isStillRunning = running;
     validateSearch(s, function () {
@@ -188,11 +198,11 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
         return;
       }
       setRunning(true);
-      core_1.showLoading(p2.loading);
-      if (p1 && !p1.ignoreUrlParam) {
+      core_1.showLoading(p1.loading);
+      if (p && !p.ignoreUrlParam) {
         search_core_1.addParametersIntoUrl(s, isFirstLoad);
       }
-      var lc = p2.getLocale ? p2.getLocale() : state_1.enLocale;
+      var lc = p1.getLocale ? p1.getLocale() : state_1.enLocale;
       if (typeof search === 'function') {
         exports.callSearch(s, search, showResults, searchError, lc, se.nextPageToken);
       }
@@ -202,9 +212,9 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
     });
   };
   var _validateSearch = function (se, callback) {
-    search_core_1.validate(se, callback, refForm.current, (p2.getLocale ? p2.getLocale() : undefined), core_1.getValidateForm(p2));
+    search_core_1.validate(se, callback, refForm.current, (p1.getLocale ? p1.getLocale() : undefined), core_1.getValidateForm(p1));
   };
-  var validateSearch = p1 && p1.validateSearch ? p1.validateSearch : _validateSearch;
+  var validateSearch = p && p.validateSearch ? p.validateSearch : _validateSearch;
   var pageSizeChanged = function (event) {
     var size = parseInt(event.currentTarget.value, 10);
     component.pageSize = size;
@@ -290,14 +300,14 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
   };
   var searchError = function (err) {
     setComponent({ pageIndex: component.tmpPageIndex });
-    core_1.error(err, p2.resource.value, p2.showError);
+    core_1.error(err, p1.resource.value, p1.showError);
   };
-  var appendList = (p1 && p1.appendList ? p1.appendList : appendListOfState);
-  var setList = (p1 && p1.setList ? p1.setList : setListOfState);
+  var appendList = (p && p.appendList ? p.appendList : appendListOfState);
+  var setList = (p && p.setList ? p.setList : setListOfState);
   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, p1 ? p1.sequenceNo : undefined, p1 ? p1.format : undefined, lc);
+      search_core_1.formatResults(results, component.pageIndex, component.pageSize, component.initPageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
     }
     var am = component.appendMode;
     var pi = (s.page && s.page >= 1 ? s.page : 1);
@@ -320,18 +330,18 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
       setList(results, setState);
       setComponent({ tmpPageIndex: s.page });
       if (s.limit) {
-        var m1 = search_core_1.buildMessage(p2.resource, s.page, s.limit, sr.list, sr.total);
-        p2.showMessage(m1);
+        var m1 = search_core_1.buildMessage(p1.resource, s.page, s.limit, sr.list, sr.total);
+        p1.showMessage(m1);
       }
     }
     setRunning(false);
-    core_1.hideLoading(p2.loading);
+    core_1.hideLoading(p1.loading);
     if (component.triggerSearch) {
       setComponent({ triggerSearch: false });
       resetAndSearch();
     }
   };
-  var showResults = (p1 && p1.showResults ? p1.showResults : _showResults);
+  var showResults = (p && p.showResults ? p.showResults : _showResults);
   var showMore = function (event) {
     event.preventDefault();
     var n = component.pageIndex ? component.pageIndex + 1 : 2;
@@ -354,8 +364,8 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
     running: running,
     setRunning: setRunning,
     getCurrencyCode: getCurrencyCode,
-    updateDateState: updateDateState, resource: p2.resource.resource(), setComponent: setComponent,
-    component: component, showMessage: p2.showMessage, load: load,
+    updateDateState: updateDateState, resource: p1.resource.resource(), setComponent: setComponent,
+    component: component, showMessage: p1.showMessage, load: load,
     add: add,
     searchOnClick: searchOnClick,
     sort: sort,
@@ -366,6 +376,6 @@ exports.useCoreSearch = function (props, refForm, initialState, search, p2, p1)
     pageChanged: pageChanged,
     pageSizeChanged: pageSizeChanged, clearKeyworkOnClick: clearQ, showResults: showResults,
     getFields: getFields,
-    getModelName: getModelName, format: p1 ? p1.format : undefined
+    getModelName: getModelName, format: p ? p.format : undefined
   });
 };

package/package.json

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

package/src/components.ts

@@ -47,27 +47,27 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
     this.showModel = this.showModel.bind(this);
     this.ref = React.createRef();
   }
-  protected name?: string;
-  protected running?: boolean;
-  protected resourceService: ResourceService;
-  protected resource: StringMap;
-  protected loading?: LoadingService;
-  protected showError: (msg: string, title?: string, detail?: string, callback?: () => void) => void;
-  protected getLocale?: (profile?: string) => Locale;
-  protected loadData?: (id: ID, ctx?: any) => Promise<T>;
+  name?: string;
+  running?: boolean;
+  resourceService: ResourceService;
+  resource: StringMap;
+  loading?: LoadingService;
+  showError: (msg: string, title?: string, detail?: string, callback?: () => void) => void;
+  getLocale?: (profile?: string) => Locale;
+  loadData?: (id: ID, ctx?: any) => Promise<T>;
   // protected service: ViewService<T, ID>;
-  protected form?: HTMLFormElement;
-  protected ref: any;
-  protected keys?: string[];
-  protected metadata?: Attributes;
+  form?: HTMLFormElement;
+  ref: any;
+  keys?: string[];
+  metadata?: Attributes;
 
-  protected back(event: any) {
+  back(event: any) {
     if (event) {
       event.preventDefault();
     }
     this.props.history.goBack();
   }
-  protected getModelName(): string {
+  getModelName(): string {
     if (this.name && this.name.length > 0) {
       return this.name;
     }
@@ -115,7 +115,7 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
       });
     }
   }
-  protected handleNotFound(form?: HTMLFormElement): void {
+  handleNotFound(form?: HTMLFormElement): void {
     const msg = message(this.resourceService.value, 'error_not_found', 'error');
     if (form) {
       readOnly(form);
@@ -135,7 +135,7 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
 
 export class BaseComponent<P, S> extends React.Component<P, S> {
   constructor(props: P,
-      protected getLocale?: () => Locale,
+      public getLocale?: () => Locale,
       private removeErr?: (ctrl: HTMLInputElement) => void) {
     super(props);
     this.getModelName = this.getModelName.bind(this);
@@ -145,8 +145,8 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
     this.updateDateState = this.updateDateState.bind(this);
     this.prepareCustomData = this.prepareCustomData.bind(this);
   }
-  protected running?: boolean;
-  protected form?: HTMLFormElement|null;
+  running?: boolean;
+  form?: HTMLFormElement|null;
   /*
   protected handleSubmitForm(e) {
     if (e.which === 13) {
@@ -163,7 +163,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
 
   prepareCustomData(data: any) { }
 
-  protected updatePhoneState = (event: any) => {
+  updatePhoneState = (event: any) => {
     const re = /^[0-9\b]+$/;
     const target = event.currentTarget as HTMLInputElement;
     const value = removePhoneFormat(target.value);
@@ -182,7 +182,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
     }
   }
 
-  protected updateDateState = (name: string, value: any) => {
+  updateDateState = (name: string, value: any) => {
     const props: any = this.props;
     const modelName = this.getModelName(this.form);
     const state = (this.state as any)[modelName];
@@ -194,7 +194,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
       this.setState(objSet);
     }
   }
-  protected getModelName(f?: HTMLFormElement|null): string {
+  getModelName(f?: HTMLFormElement|null): string {
     let f2 = f;
     if (!f2) {
       f2 = this.form;
@@ -207,7 +207,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
     }
     return 'model';
   }
-  protected updateState = (e: any, callback?: () => void, lc?: Locale) => {
+  updateState = (e: any, callback?: () => void, lc?: Locale) => {
     const ctrl = e.currentTarget as HTMLInputElement;
     const modelName = this.getModelName(ctrl.form);
     const l = localeOf(lc, this.getLocale);
@@ -226,7 +226,7 @@ export class BaseComponent<P, S> extends React.Component<P, S> {
       }
     }
   }
-  protected updateFlatState(e: any, callback?: () => void, lc?: Locale) {
+  updateFlatState(e: any, callback?: () => void, lc?: Locale) {
     const l = localeOf(lc, this.getLocale);
     const objSet: any = buildFlatState(e, this.state, l);
     if (objSet != null) {
@@ -255,7 +255,7 @@ export class MessageComponent<S extends MessageOnlyState, P> extends BaseCompone
   ref: any;
   name?: string;
   alertClass = '';
-  protected getModelName(f?: HTMLFormElement|null): string {
+  getModelName(f?: HTMLFormElement|null): string {
     if (this.name && this.name.length > 0) {
       return this.name;
     }
@@ -291,7 +291,7 @@ export class MessageComponent<S extends MessageOnlyState, P> extends BaseCompone
     this.setState({ message: '' });
   }
 }
-export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentProps, I extends SearchState<T, S>> extends BaseComponent<P, I> implements Searchable {
+export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T, S>> extends BaseComponent<P, I> implements Searchable {
   constructor(props: P,
       protected resourceService: ResourceService,
       protected showMessage: (msg: string) => void,
@@ -306,7 +306,6 @@ export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentPr
 
     this.toggleFilter = this.toggleFilter.bind(this);
     this.load = this.load.bind(this);
-    this.add = this.add.bind(this);
     this.getSearchForm = this.getSearchForm.bind(this);
     this.setSearchForm = this.setSearchForm.bind(this);
 
@@ -329,7 +328,8 @@ export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentPr
     this.showMore = this.showMore.bind(this);
     this.pageChanged = this.pageChanged.bind(this);
 
-    this.url = (props.match ? props.match.url : (props as any)['props'].match.url);
+    const currentUrl = window.location.host + window.location.pathname;
+    this.url = removeUrlParams(currentUrl);
     /*
     this.locationSearch = '';
     const location = (props.location ? props.location : props['props'].location);
@@ -338,9 +338,10 @@ export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentPr
     }
     */
   }
-  protected resource: StringMap;
-  protected url: string;
+  resource: StringMap;
+  url: string;
 
+  filter?: S;
   // Pagination
   initPageSize = 20;
   pageSize = 20;
@@ -383,18 +384,13 @@ export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentPr
   approvable?: boolean;
   deletable?: boolean;
 
-  protected getModelName(): string {
+  getModelName(): string {
     return 'filter';
   }
 
   toggleFilter(event: any): void {
     this.hideFilter = !this.hideFilter;
   }
-  protected add = (event: any) => {
-    event.preventDefault();
-    const url = (this.props as any)['props'].match.url + '/add';
-    this.props.history.push(url);
-  }
   load(s: S, autoSearch: boolean): void {
     const obj2 = initFilter(s, this);
     this.setFilter(obj2);
@@ -406,20 +402,23 @@ export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentPr
     }
   }
 
-  protected setSearchForm(form: HTMLFormElement): void {
+  setSearchForm(form: HTMLFormElement): void {
     this.form = form;
   }
 
-  protected getSearchForm(): HTMLFormElement|undefined|null {
+  getSearchForm(): HTMLFormElement|undefined|null {
     if (!this.form && this.listFormId) {
       this.form = document.getElementById(this.listFormId) as HTMLFormElement;
     }
     return this.form;
   }
   setFilter(filter: S): void {
-    this.setState(filter as any);
+    const modelName = this.getModelName();
+    const objSet: any = {};
+    objSet[modelName] = filter;
+    this.setState(objSet);
   }
-  protected getCurrencyCode(): string|undefined {
+  getCurrencyCode(): string|undefined {
     return getCurrencyCode(this.form);
   }
   getFilter(): S {
@@ -439,7 +438,7 @@ export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentPr
     const obj3 = getModel<T, S>(this.state, name, this, fields, this.excluding, this.keys, l, f, dc, lc, cc);
     return obj3;
   }
-  protected getFields(): string[]|undefined {
+  getFields(): string[]|undefined {
     const fs = getFieldsFromForm(this.fields, this.initFields, this.form);
     this.initFields = true;
     return fs;
@@ -450,11 +449,11 @@ export class BaseSearchComponent<T, S extends Filter, P extends RouteComponentPr
     this.pageSizeChanged(size);
   }
 */
-  protected pageSizeOnClick = () => {
+  pageSizeOnClick = () => {
     this.setState(prevState => ({ isPageSizeOpenDropDown: !(prevState as any).isPageSizeOpenDropDown } as any));
   }
 
-  protected clearQ(): void {
+  clearQ(): void {
     const m = this.state.model;
     if (m) {
       m.q = '';
@@ -638,6 +637,7 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
         }
       }
     }
+    this.add = this.add.bind(this);
     this.call = this.call.bind(this);
     this.showError = getErrorFunc(param, showError);
     this.componentDidMount = this.componentDidMount.bind(this);
@@ -663,6 +663,11 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
     const s: any = {};
     return s;
   }
+  add = (event: any) => {
+    event.preventDefault();
+    const url = this.url + '/add';
+    this.props.history.push(url);
+  }
   call(se: S) {
     this.running = true;
     const s = clone(se);
@@ -766,25 +771,25 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
 
   insertSuccessMsg: string;
   updateSuccessMsg: string;
-  protected back(event: any) {
+  back(event: any) {
     if (event) {
       event.preventDefault();
     }
     this.props.history.goBack();
   }
-  protected resetState(newMod: boolean, model: T, originalModel?: T) {
+  resetState(newMod: boolean, model: T, originalModel?: T) {
     this.newMode = newMod;
     this.orginalModel = originalModel;
     this.showModel(model);
   }
-  protected handleNotFound(form?: HTMLFormElement|null): void {
+  handleNotFound(form?: HTMLFormElement|null): void {
     const msg = message(this.resourceService.value, 'error_not_found', 'error');
     if (form) {
       readOnly(form);
     }
     this.showError(msg.message, msg.title);
   }
-  protected getModelName(f?: HTMLFormElement): string {
+  getModelName(f?: HTMLFormElement): string {
     if (this.name && this.name.length > 0) {
       return this.name;
     }
@@ -807,7 +812,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
   }
 
   // end of: can be in ViewComponent
-  protected createModel(): T {
+  createModel(): T {
     if (this.metadata) {
       const obj = createModel2<T>(this.metadata);
       return obj;
@@ -834,7 +839,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
       }, 100);
     }
   }
-  protected saveOnClick = (event: any) => {
+  saveOnClick = (event: any) => {
     event.preventDefault();
     (event as any).persist();
     if (!this.form && event && event.target) {
@@ -881,7 +886,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
       }
     }
   }
-  protected validate(obj: T, callback: (obj2?: T) => void) {
+  validate(obj: T, callback: (obj2?: T) => void) {
     if (this.ui && this.form) {
       const valid = this.ui.validateForm(this.form, localeOf(undefined, this.getLocale));
       if (valid) {
@@ -892,10 +897,10 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     }
   }
 
-  protected save(obj: T, dif?: T, isBack?: boolean) {
+  save(obj: T, dif?: T, isBack?: boolean) {
   }
 
-  protected succeed(msg: string, isBack?: boolean, result?: ResultInfo<T>) {
+  succeed(msg: string, isBack?: boolean, result?: ResultInfo<T>) {
     if (result) {
       const model = result.value;
       this.newMode = false;
@@ -913,7 +918,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
       this.back(null);
     }
   }
-  protected fail(result: ResultInfo<T>) {
+  fail(result: ResultInfo<T>) {
     const errors = result.errors;
     const f = this.form;
     const u = this.ui;
@@ -936,7 +941,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     }
   }
 
-  protected postSave(res: number|string|ResultInfo<T>, backOnSave?: boolean) {
+  postSave(res: number|string|ResultInfo<T>, backOnSave?: boolean) {
     this.running = false;
     hideLoading(this.loading);
     const st = this.status;
@@ -972,7 +977,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
       }
     }
   }
-  protected handleDuplicateKey(result?: ResultInfo<T>) {
+  handleDuplicateKey(result?: ResultInfo<T>) {
     const msg = message(this.resourceService.value, 'error_duplicate_key', 'error');
     this.showError(msg.message, msg.title);
   }
@@ -1012,7 +1017,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
     this.componentDidMount = this.componentDidMount.bind(this);
     this.ref = React.createRef();
   }
-  protected ref: any;
+  ref: any;
   componentDidMount() {
     const k = (this.ui ? this.ui.registerEvents : undefined);
     this.form = initForm(this.ref.current, k);
@@ -1073,7 +1078,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
       }
     }
   }
-  protected save(obj: T, body?: T, isBack?: boolean) {
+  save(obj: T, body?: T, isBack?: boolean) {
     this.running = true;
     showLoading(this.loading);
     const isBackO = (isBack == null || isBack === undefined ? this.backOnSuccess : isBack);
@@ -1122,25 +1127,25 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
       disabled: false
     };
   }
-  protected status: DiffStatusConfig;
-  protected id?: ID;
-  protected form?: HTMLFormElement;
-  protected running?: boolean;
-  protected resource: StringMap;
+  status: DiffStatusConfig;
+  id?: ID;
+  form?: HTMLFormElement;
+  running?: boolean;
+  resource: StringMap;
 
-  protected back(event: any) {
+  back(event: any) {
     if (event) {
       event.preventDefault();
     }
     this.props.history.goBack();
   }
 
-  protected initModel(): T {
+  initModel(): T {
     const x: any = {};
     return x;
   }
 
-  protected postApprove(s: number|string, err?: any) {
+  postApprove(s: number|string, err?: any) {
     this.setState({ disabled: true });
     const r = this.resourceService;
     const st = this.status;
@@ -1156,7 +1161,7 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
     }
   }
 
-  protected postReject(status: number|string, err?: any) {
+  postReject(status: number|string, err?: any) {
     this.setState({ disabled: true });
     const r = this.resourceService;
     const st = this.status;
@@ -1211,7 +1216,7 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
     }
   }
 
-  protected handleNotFound() {
+  handleNotFound() {
     this.setState({ disabled: true });
     const msg = message(this.resourceService.value, 'error_not_found', 'error');
     this.showError(msg.message, msg.title);
@@ -1235,7 +1240,7 @@ export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends D
       disabled: false,
     };
   }
-  protected ref: any;
+  ref: any;
 
   componentDidMount() {
     this.form = this.ref.current;
@@ -1317,3 +1322,7 @@ export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends D
     }
   }
 }
+export function removeUrlParams(url: string): string {
+  const startParams = url.indexOf('?');
+  return startParams !== -1 ? url.substring(0, startParams) : url;
+}

package/src/index.ts

@@ -20,3 +20,28 @@ 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/useSearch.ts

@@ -110,7 +110,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;
@@ -133,7 +133,7 @@ export interface SearchComponentState<T, S> extends Pagination, Sortable {
 }
 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';
@@ -147,6 +147,14 @@ function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): void {
     if (!p.pageMaxSize || p.pageMaxSize <= 0) {
       p.pageMaxSize = 7;
     }
+    return p;
+  } else {
+    return {
+      sequenceNo: 'sequenceNo',
+      pageSize: 20,
+      pageSizes,
+      pageMaxSize: 7
+    };
   }
 }
 export const useSearch = <T, S extends Filter, ST extends SearchComponentState<T, S>>(
@@ -156,6 +164,7 @@ export const useSearch = <T, S extends Filter, ST extends SearchComponentState<T
   p2: SearchParameter,
   p?: InitSearchComponentParam<T, S, ST>,
 ) => {
+  debugger;
   const baseProps = useCoreSearch(undefined, refForm, initialState, search, p2, p);
 
   useEffect(() => {
@@ -185,28 +194,28 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   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>
+  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];
@@ -220,7 +229,7 @@ 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 });
@@ -237,24 +246,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;
+    let keys = p && p.keys ? p.keys : undefined;
     if (!keys && typeof search !== 'function' && search.keys) {
       keys = search.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 => {
@@ -264,7 +273,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);
@@ -278,10 +287,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, () => {
@@ -289,11 +298,11 @@ 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;
+      const lc = p1.getLocale ? p1.getLocale() : enLocale;
       if (typeof search === 'function') {
         callSearch<T, S>(s, search, showResults, searchError, lc, se.nextPageToken);
       } else {
@@ -303,9 +312,9 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   };
 
   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);
@@ -395,14 +404,14 @@ 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.initPageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
     }
     const am = component.appendMode;
     const pi = (s.page && s.page >= 1 ? s.page : 1);
@@ -423,18 +432,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();
@@ -462,10 +471,10 @@ 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,
@@ -480,6 +489,6 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     showResults,
     getFields,
     getModelName,
-    format: p1 ? p1.format : undefined
+    format: p ? p.format : undefined
   };
 };