react-hook-core 0.1.4 → 0.1.5

package/src/useEdit.ts

@@ -1,17 +1,13 @@
 import {useEffect, useState} from 'react';
-import {RouteComponentProps} from 'react-router';
-import {clone, makeDiff} from 'reflectx';
+import {useNavigate, useParams} from 'react-router';
 import {Attributes, buildId, createEditStatus, EditStatusConfig, getModelName as getModelName2, hideLoading, initForm, LoadingService, Locale, message, messageByHttpStatus, ResourceService, showLoading, UIService} from './core';
 import {build, createModel as createModel2, EditParameter, GenericService, handleStatus, handleVersion, initPropertyNullInModel, ResultInfo} from './edit';
 import {focusFirstError, readOnly as setReadOnly} from './formutil';
 import {DispatchWithCallback, useMergeState} from './merge';
-import {useRouter} from './router';
+import {clone, makeDiff} from './reflect';
 import {localeOf} from './state';
 import {useUpdate} from './update';
 
-function prepareData(data: any): void {
-}
-
 export interface BaseEditComponentParam<T, ID> {
   status?: EditStatusConfig;
   backOnSuccess?: boolean;
@@ -42,7 +38,7 @@ export interface BaseEditComponentParam<T, ID> {
   handleDuplicateKey?: (result?: ResultInfo<T>) => void;
   load?: (i: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) => void;
   doSave?: (obj: T, diff?: T, version?: string, isBack?: boolean) => void;
-  prepareCustomData?: (data: any) => void; // need to review
+  // prepareCustomData?: (data: any) => void; // need to review
 }
 export interface HookBaseEditParameter<T, ID, S> extends BaseEditComponentParam<T, ID> {
   refForm: any;
@@ -60,24 +56,54 @@ export interface EditComponentParam<T, ID, S> extends BaseEditComponentParam<T,
   initialize?: (id: ID|null, ld: (i: ID|null, cb?: (m: T, showF: (model: T) => void) => void) => void, setState2: DispatchWithCallback<Partial<S>>, callback?: (m: T, showF: (model: T) => void) => void) => void;
   callback?: (m: T, showF: (model: T) => void) => void;
 }
-export interface HookPropsEditParameter<T, ID, S, P extends RouteComponentProps> extends HookPropsBaseEditParameter<T, ID, S, P> {
+export interface HookPropsEditParameter<T, ID, S, P> extends HookPropsBaseEditParameter<T, ID, S, P> {
   initialize?: (id: ID|null, ld: (i: ID|null, cb?: (m: T, showF: (model: T) => void) => void) => void, setState2: DispatchWithCallback<Partial<S>>, callback?: (m: T, showF: (model: T) => void) => void) => void;
   callback?: (m: T, showF: (model: T) => void) => void;
 }
-export interface HookPropsBaseEditParameter<T, ID, S, P extends RouteComponentProps> extends HookBaseEditParameter<T, ID, S> {
+export interface HookPropsBaseEditParameter<T, ID, S, P> extends HookBaseEditParameter<T, ID, S> {
   props: P;
-  prepareCustomData?: (data: any) => void;
+  // prepareCustomData?: (data: any) => void;
 }
 export const useEdit = <T, ID, S>(
   refForm: any,
   initialState: S,
   service: GenericService<T, ID, number|ResultInfo<T>>,
-  p1: EditParameter,
-  p2?: BaseEditComponentParam<T, ID>
+  p2: EditParameter,
+  p?: EditComponentParam<T, ID, S>
   ) => {
-  return useCoreEdit(undefined, refForm, initialState, service, p1, p2);
+  const params = useParams();
+  const baseProps = useCoreEdit(refForm, initialState, service, p2, p);
+  useEffect(() => {
+    if (refForm) {
+      const registerEvents = (p2.ui ? p2.ui.registerEvents : undefined);
+      initForm(baseProps.refForm.current, registerEvents);
+    }
+    const n = baseProps.getModelName(refForm.current);
+    const obj: any = {};
+    obj[n] = baseProps.createNewModel();
+    baseProps.setState(obj);
+    let keys: string[]|undefined;
+    if (p && !p.keys && service && service.metadata) {
+      const metadata = (p.metadata ? p.metadata : service.metadata());
+      if (metadata) {
+        const meta = build(metadata);
+        keys = (p.keys ? p.keys : (meta ? meta.keys : undefined));
+        const version = (p.version ? p.version : (meta ? meta.version : undefined));
+        p.keys = keys;
+        p.version = version;
+      }
+    }
+    const id = buildId<ID>(params, keys);
+    if (p && p.initialize) {
+      p.initialize(id, baseProps.load, baseProps.setState, p.callback);
+    } else {
+      baseProps.load(id, p ? p.callback : undefined);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {...baseProps};
 };
-export const useEditProps = <T, ID, S, P extends RouteComponentProps>(
+export const useEditProps = <T, ID, S, P>(
   props: P,
   refForm: any,
   initialState: S,
@@ -85,7 +111,8 @@ export const useEditProps = <T, ID, S, P extends RouteComponentProps>(
   p2: EditParameter,
   p?: EditComponentParam<T, ID, S>
   ) => {
-  const baseProps = useCoreEdit<T, ID, S, P>(props, refForm, initialState, service, p2, p);
+  const params = useParams();
+  const baseProps = useCoreEdit<T, ID, S, P>(refForm, initialState, service, p2, p, props);
   useEffect(() => {
     if (refForm) {
       const registerEvents = (p2.ui ? p2.ui.registerEvents : undefined);
@@ -106,28 +133,29 @@ export const useEditProps = <T, ID, S, P extends RouteComponentProps>(
         p.version = version;
       }
     }
-    const id = buildId<ID>(props, keys);
+    const id = buildId<ID>(params, keys);
     if (p && p.initialize) {
       p.initialize(id, baseProps.load, baseProps.setState, p.callback);
     } else {
       baseProps.load(id, p ? p.callback : undefined);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return {...baseProps};
 };
-export const useEditOneProps = <T, ID, S, P extends RouteComponentProps>(p: HookPropsEditParameter<T, ID, S, P>) => {
+export const useEditOneProps = <T, ID, S, P>(p: HookPropsEditParameter<T, ID, S, P>) => {
   return useEditProps(p.props, p.refForm, p.initialState, p.service, p, p);
 };
 export const useEditOne = <T, ID, S>(p: HookBaseEditParameter<T, ID, S>) => {
   return useEdit(p.refForm, p.initialState, p.service, p, p);
 };
 export const useCoreEdit = <T, ID, S, P>(
-  props: P|undefined,
   refForm: any,
   initialState: S,
   service: GenericService<T, ID, number|ResultInfo<T>>,
   p1: EditParameter,
-  p?: BaseEditComponentParam<T, ID>
+  p?: BaseEditComponentParam<T, ID>,
+  props?: P
   ) => {
     /*
   const {
@@ -135,13 +163,13 @@ export const useCoreEdit = <T, ID, S, P>(
     patchable = true,
     addable = true
   } = p; */
+  const navigate = useNavigate();
   const addable = (p && p.patchable !== false ? true : undefined);
-  const {goBack} = useRouter();
   const back = (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     if (event) {
       event.preventDefault();
     }
-    goBack();
+    navigate(-1);
   };
 
   const [running, setRunning] = useState<boolean>();
@@ -154,18 +182,6 @@ export const useCoreEdit = <T, ID, S, P>(
   };
   const baseProps = useUpdate<S>(initialState, getModelName, p1.getLocale);
 
-  const prepareCustomData = (p && p.prepareCustomData ? p.prepareCustomData : prepareData);
-  const updateDateState = (name: string, value: any) => {
-    const modelName = getModelName(refForm.current);
-    const currentState = (state as any)[modelName];
-    if (props && (props as any).setGlobalState) {
-      const data = (props as any).shouldBeCustomized ? prepareCustomData({ [name]: value }) : { [name]: value };
-      (props as any).setGlobalState({ [modelName]: { ...currentState, ...data } });
-    } else {
-      setState({[modelName]: {...currentState, [name]: value}} as T);
-    }
-  };
-
   const { state, setState } = baseProps;
   const [flag, setFlag] = useMergeState({
     newMode: false,
@@ -462,7 +478,6 @@ export const useCoreEdit = <T, ID, S, P>(
     flag,
     running,
     setRunning,
-    updateDateState,
     showModel,
     getModelName,
     resetState,
@@ -472,6 +487,7 @@ export const useCoreEdit = <T, ID, S, P>(
     newOnClick: create,
     save,
     onSave,
+    // eslint-disable-next-line no-restricted-globals
     confirm,
     validate,
     showMessage: p1.showMessage,

package/src/useSearch.ts

@@ -1,21 +1,25 @@
 import {useEffect, useState} from 'react';
-import {RouteComponentProps} from 'react-router';
-import {useHistory, useRouteMatch} from 'react-router-dom';
-import {clone} from 'reflectx';
-import {addParametersIntoUrl, append, buildMessage, Filter, formatResults, getFieldsFromForm, getModel, handleAppend, handleSort, initFilter, mergeFilter as mergeFilter2, Pagination, removeSortStatus, showPaging, Sortable, validate} from 'search-core';
 import {error, getDecodeFromForm, getName, getRemoveError, getValidateForm, handleToggle, hideLoading, initForm, Locale, PageChange, pageSizes, removeFormError, ResourceService, SearchParameter, SearchResult, SearchService, showLoading} from './core';
 import {DispatchWithCallback, useMergeState} from './merge';
+import {clone} from './reflect';
 import {buildFromUrl} from './route';
+import {addParametersIntoUrl, append, buildMessage, formatResults, getFieldsFromForm, getModel, handleAppend, handleSort, initFilter, mergeFilter as mergeFilter2, Pagination, removeSortStatus, showPaging, Sortable, validate} from './search';
 import {enLocale} from './state';
-import {useUpdate, useUpdateWithProps} from './update';
+import {useUpdate} from './update';
 
 export interface Searchable<T> extends Pagination, Sortable {
   nextPageToken?: string;
   excluding?: string[]|number[];
   list?: T[];
 }
-function prepareData(data: any): void {
+interface Filter {
+  page?: number;
+  limit?: number;
+  firstLimit?: number;
+  fields?: string[];
+  sort?: string;
 }
+
 export const callSearch = <T, S extends Filter>(se: S, search3: (s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>, showResults3: (s: S, sr: SearchResult<T>, lc: Locale) => void, searchError3: (err: any) => void, lc: Locale, nextPageToken?: string) => {
   const s = clone(se);
   let page = se.page;
@@ -53,7 +57,7 @@ export interface InitSearchComponentParam<T, M extends Filter, S> extends Search
   createFilter?: () => M;
   initialize?: (ld: (s: M, auto?: boolean) => void, setState2: DispatchWithCallback<Partial<S>>, com?: SearchComponentState<T, M>) => void;
 }
-export interface HookPropsSearchParameter<T, S extends Filter, ST, P extends RouteComponentProps> extends HookPropsBaseSearchParameter<T, S, ST, P> {
+export interface HookPropsSearchParameter<T, S extends Filter, ST, P> extends HookPropsBaseSearchParameter<T, S, ST, P> {
   createFilter?: () => S;
   initialize?: (ld: (s: S, auto?: boolean) => void, setState2: DispatchWithCallback<Partial<ST>>, com?: SearchComponentState<T, S>) => void;
 }
@@ -83,7 +87,7 @@ export interface SearchComponentParam<T, M extends Filter> {
   getFilter?: () => M;
   getFields?: () => string[]|undefined;
   validateSearch?: (se: M, callback: () => void) => void;
-  prepareCustomData?: (data: any) => void;
+  // prepareCustomData?: (data: any) => void;
   format?(obj: T, locale?: Locale): T;
   showResults?(s: M, sr: SearchResult<T>, lc: Locale): void;
   appendList?(results: T[], list: T[]|undefined, s: DispatchWithCallback<Partial<SearchComponentState<T, M>>>): void;
@@ -110,7 +114,7 @@ export interface HookBaseSearchParameter<T, S extends Filter, ST extends SearchC
 }
 export interface HookPropsBaseSearchParameter<T, S extends Filter, ST, P> extends HookBaseSearchParameter<T, S, ST> {
   props?: P;
-  prepareCustomData?: (data: any) => void;
+  // prepareCustomData?: (data: any) => void;
 }
 export interface SearchComponentState<T, S> extends Pagination, Sortable {
   view?: string;
@@ -189,7 +193,7 @@ export const useSearch = <T, S extends Filter, ST extends SearchComponentState<T
   p2: SearchParameter,
   p?: InitSearchComponentParam<T, S, ST>,
 ) => {
-  const baseProps = useCoreSearch(undefined, refForm, initialState, service, p2, p);
+  const baseProps = useCoreSearch(refForm, initialState, service, p2, p);
 
   useEffect(() => {
     const { load, setState, component } = baseProps;
@@ -204,22 +208,23 @@ export const useSearch = <T, S extends Filter, ST extends SearchComponentState<T
       const s: any = mergeFilter2(buildFromUrl<S>(), se, component.pageSizes);
       load(s, p2.auto);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return { ...baseProps };
 };
-export const useSearchOneProps = <T, S extends Filter, ST extends SearchComponentState<T, S>, P extends RouteComponentProps>(p: HookPropsSearchParameter<T, S, ST, P>) => {
+export const useSearchOneProps = <T, S extends Filter, ST extends SearchComponentState<T, S>, P>(p: HookPropsSearchParameter<T, S, ST, P>) => {
   return useSearch(p.refForm, p.initialState, p.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.service, p, p);
+  return useCoreSearch(p.refForm, p.initialState, p.service, p, p);
 };
 export const useCoreSearch = <T, S extends Filter, ST, P>(
-  props: P|undefined,
   refForm: any,
   initialState: ST,
   service: ((s: S, limit?: number, offset?: number|string, fields?: string[]) => Promise<SearchResult<T>>) | SearchService<T, S>,
   p1: SearchParameter,
-  p2?: SearchComponentParam<T, S>
+  p2?: SearchComponentParam<T, S>,
+  props?: P
 ) => {
   const p = mergeParam(p2);
   const [running, setRunning] = useState<boolean>();
@@ -230,28 +235,14 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   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, p1.getLocale, getRemoveError(p1), p ? p.prepareCustomData : undefined) : useUpdate<ST>(initialState, getModelName, p1.getLocale, getRemoveError(p1)));
+  const baseProps = 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 = p && p.getCurrencyCode ? p.getCurrencyCode : _getCurrencyCode;
 
-  const prepareCustomData = (p && p.prepareCustomData ? p.prepareCustomData : prepareData);
-  const updateDateState = (name: string, value: any) => {
-    const modelName = getModelName();
-    const currentState = (state as any)[modelName];
-    if (props && (props as any).setGlobalState) {
-      const data = (props as any).shouldBeCustomized ? prepareCustomData({ [name]: value }) : { [name]: value };
-      (props as any).setGlobalState({ [modelName]: { ...currentState, ...data } });
-    } else {
-      setState({ [modelName]: { ...currentState, [name]: value } } as T);
-    }
-    setState({ [modelName]: { ...currentState, [name]: value } } as T);
-  };
-
   // const p = createSearchComponentState<T, S>(p1);
   const [component, setComponent] = useMergeState<SearchComponentState<T, S>>(p);
 
@@ -261,11 +252,6 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     setComponent({ hideFilter: x });
   };
 
-  const add = (event: any) => {
-    event.preventDefault();
-    history.push(match.url + '/add');
-  };
-
   const _getFields = (): string[]|undefined => {
     const { fields, initFields } = component;
     const fs = getFieldsFromForm(fields, initFields, refForm.current);
@@ -496,13 +482,11 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     running,
     setRunning,
     getCurrencyCode,
-    updateDateState,
     resource: p1.resource.resource(),
     setComponent,
     component,
     showMessage: p1.showMessage,
     load,
-    add,
     search,
     sort,
     changeView,

package/src/useView.ts

@@ -1,9 +1,8 @@
 import {useEffect, useState} from 'react';
-import {RouteComponentProps} from 'react-router';
+import {useNavigate, useParams} from 'react-router';
 import {buildId, getModelName as getModelName2, hideLoading, initForm, LoadingService, Locale, message, messageByHttpStatus, ResourceService, showLoading, ViewParameter, ViewService} from './core';
 import {readOnly} from './formutil';
 import {DispatchWithCallback, useMergeState} from './merge';
-import {useRouter} from './router';
 
 export interface BaseViewComponentParam<T, ID> {
   name?: string;
@@ -26,7 +25,7 @@ export interface ViewComponentParam<T, ID, S> extends BaseViewComponentParam<T,
   initialize?: (id: ID, ld: (i: ID, cb?: (m: T, showF: (model: T) => void) => void) => void, setState2: DispatchWithCallback<Partial<S>>, callback?: (m: T, showF: (model: T) => void) => void) => void;
   callback?: (m: T, showF: (model: T) => void) => void;
 }
-export interface HookPropsViewParameter<T, ID, S, P extends RouteComponentProps> extends HookPropsBaseViewParameter<T, ID, S, P> {
+export interface HookPropsViewParameter<T, ID, S, P> extends HookPropsBaseViewParameter<T, ID, S, P> {
   keys?: string[];
   initialize?: (id: ID, ld: (i: ID, cb?: (m: T, showF: (model: T) => void) => void) => void, setState2: DispatchWithCallback<Partial<S>>, callback?: (m: T, showF: (model: T) => void) => void) => void;
   callback?: (m: T, showF: (model: T) => void) => void;
@@ -34,13 +33,36 @@ export interface HookPropsViewParameter<T, ID, S, P extends RouteComponentProps>
 export interface HookPropsBaseViewParameter<T, ID, S, P> extends HookBaseViewParameter<T, ID, S> {
   props: P;
 }
-export const useViewOneProps = <T, ID, S, P extends RouteComponentProps>(p: HookPropsViewParameter<T, ID, S, P>) => {
-  return useViewProps(p.props, p.refForm, p.initialState, p.service, p, p);
-};
 export const useViewOne = <T, ID, S>(p: HookBaseViewParameter<T, ID, S>) => {
-  return useView(p.refForm, p.initialState, p.service, p, p);
+  return useCoreView(p.refForm, p.initialState, p.service, p, p);
 };
 export const useView = <T, ID, S>(
+  refForm: any,
+  initialState: S,
+  service: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
+  p1: ViewParameter,
+  p?: ViewComponentParam<T, ID, S>
+  ) => {
+  const baseProps = useCoreView(refForm, initialState, service, p1, p);
+  const [, setState] = useMergeState<S>(initialState);
+  const params = useParams();
+  useEffect(() => {
+    if (baseProps.refForm) {
+      initForm(baseProps.refForm.current);
+    }
+    const id = buildId<ID>(params, p ? p.keys : undefined);
+    if (id) {
+      if (p && p.initialize) {
+        p.initialize(id, baseProps.load, setState, p.callback);
+      } else {
+        baseProps.load(id, p ? p.callback : undefined);
+      }
+    }
+  }, []);
+  return {...baseProps};
+};
+
+export const useCoreView = <T, ID, S>(
   refForm: any,
   initialState: S,
   service: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
@@ -49,13 +71,13 @@ export const useView = <T, ID, S>(
   ) => {
   const [state, setState] = useMergeState<S>(initialState);
   const [running, setRunning] = useState<boolean>();
-  const {goBack} = useRouter();
+  const navigate = useNavigate();
 
   const back = (event: any) => {
     if (event) {
       event.preventDefault();
     }
-    goBack();
+    navigate(-1);
   };
 
   const getModelName = (f?: HTMLFormElement) => {
@@ -134,28 +156,3 @@ export const useView = <T, ID, S>(
     back
   };
 };
-export const useViewProps = <T, ID, S, P extends RouteComponentProps>(
-  props: P,
-  refForm: any,
-  initialState: S,
-  service: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
-  p1: ViewParameter,
-  p?: ViewComponentParam<T, ID, S>
-  ) => {
-  const baseProps = useView(refForm, initialState, service, p1, p);
-  const [state, setState] = useMergeState<S>(initialState);
-  useEffect(() => {
-    if (baseProps.refForm) {
-      initForm(baseProps.refForm.current);
-    }
-    const id = buildId<ID>(props, p ? p.keys : undefined);
-    if (id) {
-      if (p && p.initialize) {
-        p.initialize(id, baseProps.load, setState, p.callback);
-      } else {
-        baseProps.load(id, p ? p.callback : undefined);
-      }
-    }
-  }, []);
-  return {...baseProps};
-};

package/tsconfig.json

@@ -7,6 +7,7 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "strict": true,
+    "strictNullChecks": true,
     "pretty": true,
     "sourceMap": false,
     "declaration": false,