react-hook-core 0.1.2 → 0.1.5

package/src/components.ts

@@ -1,17 +1,18 @@
 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 {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 {BaseDiffState, createDiffStatus, createEditStatus, DiffApprService, DiffParameter, DiffState, DiffStatusConfig, handleToggle, hideLoading, showLoading} from './core';
+import {Attributes, 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';
 import {getAutoSearch, getConfirmFunc, getDiffStatusFunc, getEditStatusFunc, getErrorFunc, getLoadingFunc, getLocaleFunc, getMsgFunc, getResource, getUIService} from './input';
+import {clone, diff, makeDiff} from './reflect';
 import {buildFromUrl} from './route';
+import {addParametersIntoUrl, append, buildMessage, changePage, changePageSize, formatResults, getFieldsFromForm, getModel, handleAppend, handleSortEvent, initFilter, mergeFilter as mergeFilter2, more, Pagination, reset, showPaging, Sortable, validate} from './search';
 import {buildFlatState, buildState, enLocale, handleEvent, handleProps, localeOf} from './state';
 
-export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends React.Component<P, S> {
+interface Searchable extends Pagination, Sortable {
+}
+export class ViewComponent<T, ID, P, S> extends React.Component<P, S> {
   constructor(props: P, sv: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
       param: ResourceService|ViewParameter,
       showError?: (msg: string, title?: string, detail?: string, callback?: () => void) => void,
@@ -40,7 +41,6 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
         }
       }
     }
-    this.back = this.back.bind(this);
     this.getModelName = this.getModelName.bind(this);
     this.load = this.load.bind(this);
     this.getModel = this.getModel.bind(this);
@@ -54,19 +54,13 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
   loading?: LoadingService;
   showError: (msg: string, title?: string, detail?: string, callback?: () => void) => void;
   getLocale?: (profile?: string) => Locale;
-  loadData?: (id: ID, ctx?: any) => Promise<T>;
+  loadData?: (id: ID) => Promise<T|null>;
   // protected service: ViewService<T, ID>;
   form?: HTMLFormElement;
   ref: any;
   keys?: string[];
   metadata?: Attributes;
 
-  back(event: any) {
-    if (event) {
-      event.preventDefault();
-    }
-    this.props.history.goBack();
-  }
   getModelName(): string {
     if (this.name && this.name.length > 0) {
       return this.name;
@@ -78,13 +72,6 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
       return n;
     }
   }
-  componentDidMount() {
-    this.form = this.ref.current;
-    const id = buildId<ID>(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
-  }
   load(_id: ID, callback?: (m: T, showF: (model: T) => void) => void) {
     const id: any = _id;
     if (id != null && id !== '' && this.loadData) {
@@ -291,7 +278,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,
@@ -301,6 +288,7 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
       protected listFormId?: string) {
     super(props, getLocale, (ui ? ui.removeError : undefined));
     this.resource = resourceService.resource();
+    this.hideFilter = true;
     this.getModelName = this.getModelName.bind(this);
     this.showMessage = this.showMessage.bind(this);
 
@@ -315,7 +303,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 +329,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 +356,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[];
@@ -388,10 +376,12 @@ export class BaseSearchComponent<T, S extends Filter, P, I extends SearchState<T
     return 'filter';
   }
 
-  toggleFilter(event: any): void {
-    this.hideFilter = !this.hideFilter;
+  toggleFilter(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {
+    const x = !this.hideFilter;
+    handleToggle(event.target as HTMLInputElement, !x);
+    this.hideFilter = x;
   }
-  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 +402,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 +411,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 +425,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 +454,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 +498,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,13 +600,13 @@ 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();
   }
 }
-export class SearchComponent<T, S extends Filter, P extends RouteComponentProps, I extends SearchState<T, S>> extends BaseSearchComponent<T, S, P, I> {
+export class SearchComponent<T, S extends Filter, P, I extends SearchState<T, S>> extends BaseSearchComponent<T, S, P, I> {
   constructor(props: P, sv: ((s: S, ctx?: any) => Promise<SearchResult<T>>) | SearchService<T, S>,
       param: ResourceService|SearchParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -629,15 +620,14 @@ 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();
         }
       }
     }
-    this.add = this.add.bind(this);
     this.call = this.call.bind(this);
     this.showError = getErrorFunc(param, showError);
     this.componentDidMount = this.componentDidMount.bind(this);
@@ -646,7 +636,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;
@@ -663,11 +653,6 @@ 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);
@@ -692,8 +677,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);
@@ -707,7 +692,7 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
   }
 }
 
-export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> extends BaseComponent<P, S> {
+export abstract class BaseEditComponent<T, P, S> extends BaseComponent<P, S> {
   constructor(props: P,
       protected resourceService: ResourceService,
       protected showMessage: (msg: string) => void,
@@ -743,11 +728,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);
@@ -775,7 +760,6 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     if (event) {
       event.preventDefault();
     }
-    this.props.history.goBack();
   }
   resetState(newMod: boolean, model: T, originalModel?: T) {
     this.newMode = newMod;
@@ -822,7 +806,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     }
   }
 
-  newOnClick = (event: any) => {
+  create = (event: any) => {
     if (event) {
       event.preventDefault();
     }
@@ -839,7 +823,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 +851,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 +863,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 +881,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>) {
@@ -982,7 +966,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     this.showError(msg.message, msg.title);
   }
 }
-export class EditComponent<T, ID, P extends RouteComponentProps, S> extends BaseEditComponent<T, P, S>  {
+export class EditComponent<T, ID, P, S> extends BaseEditComponent<T, P, S>  {
   constructor(props: P, protected service: GenericService<T, ID, number|ResultInfo<T>>,
       param: ResourceService|EditParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -1013,20 +997,11 @@ 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.componentDidMount = this.componentDidMount.bind(this);
+    this.doSave = this.doSave.bind(this);
     this.ref = React.createRef();
   }
   ref: any;
-  componentDidMount() {
-    const k = (this.ui ? this.ui.registerEvents : undefined);
-    this.form = initForm(this.ref.current, k);
-    const id = buildId<ID>(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
-  }
-  load(_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) {
+  load(_id: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) {
     const id: any = _id;
     if (id != null && id !== '') {
       const com = this;
@@ -1078,7 +1053,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);
@@ -1103,7 +1078,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
   }
 }
 
-export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S extends BaseDiffState> extends React.Component<P, S & any> {
+export class BaseDiffApprComponent<T, ID, P, S extends BaseDiffState> extends React.Component<P, S & any> {
   constructor(props: P, protected keys: string[], protected resourceService: ResourceService,
       protected showMessage: (msg: string, option?: string) => void,
       protected showError: (m: string, title?: string, detail?: string, callback?: () => void) => void,
@@ -1116,7 +1091,6 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
     this.resource = resourceService.resource();
     this.showMessage = this.showMessage.bind(this);
     this.showError = this.showError.bind(this);
-    this.back = this.back.bind(this);
     this.initModel = this.initModel.bind(this);
     this.postApprove = this.postApprove.bind(this);
     this.postReject = this.postReject.bind(this);
@@ -1133,13 +1107,6 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
   running?: boolean;
   resource: StringMap;
 
-  back(event: any) {
-    if (event) {
-      event.preventDefault();
-    }
-    this.props.history.goBack();
-  }
-
   initModel(): T {
     const x: any = {};
     return x;
@@ -1222,7 +1189,7 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
     this.showError(msg.message, msg.title);
   }
 }
-export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends DiffState<T>> extends BaseDiffApprComponent<T, ID, P, S> {
+export class DiffApprComponent<T, ID, P, S extends DiffState<T>> extends BaseDiffApprComponent<T, ID, P, S> {
   constructor(props: P, protected service: DiffApprService<T, ID>,
       param: ResourceService|DiffParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -1242,14 +1209,6 @@ export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends D
   }
   ref: any;
 
-  componentDidMount() {
-    this.form = this.ref.current;
-    const id = buildId<ID>(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
-  }
-
   formatFields(value: T): T {
     return value;
   }