react-hook-core 0.1.4 → 0.1.7

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, 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, handleToggle, hideLoading, showLoading} 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 {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);
@@ -61,12 +61,6 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
   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) {
@@ -619,7 +606,7 @@ export class BaseSearchComponent<T, F extends Filter, P, I extends SearchState<T
     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,
@@ -641,7 +628,6 @@ 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);
@@ -667,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);
@@ -711,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,
@@ -779,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;
@@ -986,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,
@@ -1018,16 +998,9 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
     }
     this.load = this.load.bind(this);
     this.doSave = this.doSave.bind(this);
-    this.componentDidMount = this.componentDidMount.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);
-    this.load(id);
-  }
   load(_id: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) {
     const id: any = _id;
     if (id != null && id !== '') {
@@ -1105,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,
@@ -1118,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);
@@ -1135,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;
@@ -1224,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,
@@ -1244,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;
   }

package/src/core.ts

@@ -1,7 +1,8 @@
-import {RouteComponentProps} from 'react-router';
-import {focusFirstElement} from './formutil';
+import { Params } from 'react-router';
+import { focusFirstElement } from './formutil';
 
 export const pageSizes = [12, 24, 60, 100, 120, 180, 300, 600];
+export const size = pageSizes;
 export interface ModelMap {
   [key: string]: any;
 }
@@ -35,12 +36,12 @@ export interface SearchParameter {
   auto?: boolean;
 }
 export interface EditStatusConfig {
-  duplicate_key: number|string;
-  not_found: number|string;
-  success: number|string;
-  version_error: number|string;
-  error?: number|string;
-  data_corrupt?: number|string;
+  duplicate_key: number | string;
+  not_found: number | string;
+  success: number | string;
+  version_error: number | string;
+  error?: number | string;
+  data_corrupt?: number | string;
 }
 export function createEditStatus(status?: EditStatusConfig): EditStatusConfig {
   if (status) {
@@ -57,10 +58,10 @@ export function createEditStatus(status?: EditStatusConfig): EditStatusConfig {
   return s;
 }
 export interface DiffStatusConfig {
-  not_found: number|string;
-  success: number|string;
-  version_error: number|string;
-  error?: number|string;
+  not_found: number | string;
+  success: number | string;
+  version_error: number | string;
+  error?: number | string;
 }
 export function createDiffStatus(status?: DiffStatusConfig): DiffStatusConfig {
   if (status) {
@@ -96,7 +97,7 @@ export interface SearchState<T, S extends Filter> {
 }
 export interface SearchService<T, S extends Filter> {
   keys?(): string[];
-  search(s: S, limit?: number, offset?: number|string, fields?: string[]): Promise<SearchResult<T>>;
+  search(s: S, limit?: number, offset?: number | string, fields?: string[]): Promise<SearchResult<T>>;
 }
 export interface ViewParameter {
   resource: ResourceService;
@@ -105,9 +106,9 @@ export interface ViewParameter {
   loading?: LoadingService;
 }
 export interface ViewService<T, ID> {
-  metadata?(): Attributes|undefined;
+  metadata?(): Attributes | undefined;
   keys?(): string[];
-  load(id: ID, ctx?: any): Promise<T|null>;
+  load(id: ID, ctx?: any): Promise<T | null>;
 }
 
 export interface DiffParameter {
@@ -131,8 +132,8 @@ export interface DiffModel<T, ID> {
   value: T;
 }
 export interface ApprService<ID> {
-  approve(id: ID, ctx?: any): Promise<number|string>;
-  reject(id: ID, ctx?: any): Promise<number|string>;
+  approve(id: ID, ctx?: any): Promise<number | string>;
+  reject(id: ID, ctx?: any): Promise<number | string>;
 }
 export interface DiffService<T, ID> {
   keys(): string[];
@@ -148,11 +149,11 @@ export interface DiffState<T> {
 
 // tslint:disable-next-line:class-name
 export class resource {
-  static phone = / |\-|\.|\(|\)/g;
+  static phone = / |-|\.|\(|\)/g;
   static _cache: any = {};
   static cache = true;
 }
-export function getCurrencyCode(form?: HTMLFormElement|null): string|undefined {
+export function getCurrencyCode(form?: HTMLFormElement | null): string | undefined {
   if (form) {
     const x = form.getAttribute('currency-code');
     if (x) {
@@ -182,34 +183,34 @@ export interface Message {
   yes?: string;
   no?: string;
 }
-export function getString(key: string, gv: StringMap|((key: string) => string)): string {
+export function getString(key: string, gv: StringMap | ((key: string) => string)): string {
   if (typeof gv === 'function') {
     return gv(key);
   } else {
     return gv[key];
   }
 }
-export function message(gv: StringMap|((key: string) => string), msg: string, title?: string, yes?: string, no?: string): Message {
+export function message(gv: StringMap | ((key: string) => string), msg: string, title?: string, yes?: string, no?: string): Message {
   const m2 = (msg && msg.length > 0 ? getString(msg, gv) : '');
-    const m: Message = { message: m2, title: '' };
-    if (title && title.length > 0) {
-      m.title = getString(title, gv);
-    }
-    if (yes && yes.length > 0) {
-      m.yes = getString(yes, gv);
-    }
-    if (no && no.length > 0) {
-      m.no = getString(no, gv);
-    }
-    return m;
+  const m: Message = { message: m2, title: '' };
+  if (title && title.length > 0) {
+    m.title = getString(title, gv);
+  }
+  if (yes && yes.length > 0) {
+    m.yes = getString(yes, gv);
+  }
+  if (no && no.length > 0) {
+    m.no = getString(no, gv);
+  }
+  return m;
 }
-export function messageByHttpStatus(status: number, gv: StringMap|((key: string) => string)): string {
+export function messageByHttpStatus(status: number, gv: StringMap | ((key: string) => string)): string {
   const k = 'status_' + status;
   let msg = getString(k, gv);
-    if (!msg || msg.length === 0) {
-      msg = getString('error_internal', gv);
-    }
-    return msg;
+  if (!msg || msg.length === 0) {
+    msg = getString('error_internal', gv);
+  }
+  return msg;
 }
 
 export interface Locale {
@@ -232,12 +233,12 @@ export interface LoadingService {
 export interface ErrorMessage {
   field: string;
   code: string;
-  param?: string|number|Date;
+  param?: string | number | Date;
   message?: string;
 }
 export interface UIService {
-  getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string|number|boolean|null|undefined;
-  decodeFromForm(form: HTMLFormElement, locale?: Locale, currencyCode?: string|null): any;
+  getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string | number | boolean | null | undefined;
+  decodeFromForm(form: HTMLFormElement, locale?: Locale, currencyCode?: string | null): any;
 
   validateForm(form?: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean): boolean;
   removeFormError(form: HTMLFormElement): void;
@@ -284,26 +285,23 @@ export function buildKeys(attributes: Attributes): string[] {
   }
   return ps;
 }
-
-export function buildId<ID>(props: RouteComponentProps, keys?: string[]): ID|null {
-  if (!props) {
-    return null;
-  }
-  const sp: any = ((props as any).match ? props : (props as any)['props']);
+type Readonly<T> = {
+  readonly [P in keyof T]: T[P];
+};
+export function buildId<ID>(p: Readonly<Params<string>>, keys?: string[]): ID | null {
   if (!keys || keys.length === 0 || keys.length === 1) {
     if (keys && keys.length === 1) {
-      const x = sp.match.params[keys[0]];
-      if (x && x !== '') {
-        return x;
+      if (p[keys[0]]) {
+        return p[keys[0]] as any;
       }
     }
-    return sp.match.params['id'];
+    return p['id'] as any;
   }
   const id: any = {};
   for (const key of keys) {
-    let v = sp.match.params[key];
+    let v = p[key];
     if (!v) {
-      v = sp[key];
+      v = p[key];
       if (!v) {
         return null;
       }
@@ -312,8 +310,6 @@ export function buildId<ID>(props: RouteComponentProps, keys?: string[]): ID|nul
   }
   return id;
 }
-
-
 export function dateToDefaultString(date: Date): string {
   return '' + date.getFullYear() + '-' + addZero(date.getMonth() + 1, 2) + '-' + addZero(date.getDate(), 2); // DateUtil.formatDate(date, 'YYYY-MM-DD');
 }
@@ -380,7 +376,7 @@ export function formatCurrency(currency: string|number, locale?: Locale, currenc
 }
 */
 
-export function initForm(form?: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement|undefined {
+export function initForm(form?: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement | undefined {
   if (form) {
     setTimeout(() => {
       if (initMat) {
@@ -412,7 +408,7 @@ export function error(err: any, gv: (key: string) => string, ae: (msg: string, h
 export function getName(d: string, n?: string): string {
   return (n && n.length > 0 ? n : d);
 }
-export function getModelName(form?: HTMLFormElement|null, name?: string): string {
+export function getModelName(form?: HTMLFormElement | null, name?: string): string {
   if (form) {
     const a = form.getAttribute('model-name');
     if (a && a.length > 0) {
@@ -473,7 +469,7 @@ export function hideLoading(s?: LoadingService): void {
 export interface UIParameter {
   ui?: UIService;
 }
-export function getRemoveError(u?: UIParameter, rmErr?: (el: HTMLInputElement) => void): ((el: HTMLInputElement) => void)|undefined {
+export function getRemoveError(u?: UIParameter, rmErr?: (el: HTMLInputElement) => void): ((el: HTMLInputElement) => void) | undefined {
   if (rmErr) {
     return rmErr;
   }
@@ -484,13 +480,13 @@ export function removeFormError(u?: UIParameter, f?: HTMLFormElement): void {
     u.ui.removeFormError(f);
   }
 }
-export function getValidateForm(u?: UIParameter, vf?: (form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean): ((form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean)|undefined {
+export function getValidateForm(u?: UIParameter, vf?: (form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean): ((form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean) | undefined {
   if (vf) {
     return vf;
   }
   return (u && u.ui ? u.ui.validateForm : undefined);
 }
-export function getDecodeFromForm(u?: UIParameter, d?: (form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any): ((form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any)|undefined {
+export function getDecodeFromForm(u?: UIParameter, d?: (form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any): ((form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any) | undefined {
   if (d) {
     return d;
   }

package/src/diff.ts

@@ -1,5 +1,5 @@
-import {clone} from 'reflectx';
 import {DiffModel} from './core';
+import {clone} from './reflect';
 
 export function formatDiffModel<T, ID>(obj: DiffModel<T, ID>, formatFields?: (obj3: T) => T): DiffModel<T, ID> {
   if (!obj) {

package/src/formutil.ts

@@ -74,7 +74,7 @@ export function focusFirstError(form?: HTMLFormElement|null, className?: string)
       const ctrl = form[i] as HTMLInputElement;
       const parent = ctrl.parentElement;
       if (ctrl.classList.contains(className)
-        || parent && parent.classList.contains(className)) {
+        || (parent && parent.classList.contains(className))) {
         ctrl.focus();
         ctrl.scrollIntoView();
         return;
@@ -86,7 +86,7 @@ export function focusFirstError(form?: HTMLFormElement|null, className?: string)
       const parent = ctrl.parentElement;
       if (ctrl.classList.contains('invalid')
         || ctrl.classList.contains('.ng-invalid')
-        || parent && parent.classList.contains('invalid')) {
+        || (parent && parent.classList.contains('invalid'))) {
         ctrl.focus();
         ctrl.scrollIntoView();
         return;

package/src/index.ts

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
 export * from './formutil';
 export * from './util';
 export * from './core';
 export * from './state';
 export * from './edit';
 export * from './route';
-export * from './components';
 export * from './diff';
-export * from './router';
 export * from './merge';
 export * from './update';
-export * from './useView';
-export * from './useEdit';
 export * from './useSearch';
 export * from './useMessage';
+export * from './useEdit';
+export * from './components';
+export * from './search';
+export * from './reflect';
+export * from './com';
 
 export function checked(s: string[]|string|undefined, v: string): boolean|undefined {
   if (s) {
@@ -29,10 +29,6 @@ export function checked(s: string[]|string|undefined, v: string): boolean|undefi
 export function value<T>(obj?: T): T {
   return (obj ? obj : {} as any);
 }
-export const withDefaultProps = (Component: any) => (props: RouteComponentProps) => {
-  // return <Component props={props} history={props.history} />;
-  return React.createElement(Component, { props, history: props.history });
-};
 export interface LoadingProps {
   error?: any;
 }
@@ -58,3 +54,4 @@ export const Loading = (props: LoadingProps) => {
     );*/
   }
 };
+export type OnClick = React.MouseEvent<HTMLElement, MouseEvent>;