react-hook-core 0.1.3 → 0.1.4

package/README.md

@@ -1 +1 @@
-# react-xone
+# react

package/lib/components.js

@@ -327,6 +327,7 @@ var BaseSearchComponent = (function (_super) {
       _this.doSearch();
     };
     _this.resource = resourceService.resource();
+    _this.hideFilter = true;
     _this.getModelName = _this.getModelName.bind(_this);
     _this.showMessage = _this.showMessage.bind(_this);
     _this.toggleFilter = _this.toggleFilter.bind(_this);
@@ -357,7 +358,9 @@ var BaseSearchComponent = (function (_super) {
     return 'filter';
   };
   BaseSearchComponent.prototype.toggleFilter = function (event) {
-    this.hideFilter = !this.hideFilter;
+    var x = !this.hideFilter;
+    core_1.handleToggle(event.target, !x);
+    this.hideFilter = x;
   };
   BaseSearchComponent.prototype.load = function (s, autoSearch) {
     var obj2 = search_core_1.initFilter(s, this);
@@ -956,9 +959,7 @@ var EditComponent = (function (_super) {
     var k = (this.ui ? this.ui.registerEvents : undefined);
     this.form = core_2.initForm(this.ref.current, k);
     var id = core_2.buildId(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
+    this.load(id);
   };
   EditComponent.prototype.load = function (_id, callback) {
     var _this = this;

package/lib/core.js

@@ -269,3 +269,16 @@ function getDecodeFromForm(u, d) {
   return (u && u.ui ? u.ui.decodeFromForm : undefined);
 }
 exports.getDecodeFromForm = getDecodeFromForm;
+function handleToggle(target, on) {
+  if (target) {
+    if (on) {
+      if (!target.classList.contains('on')) {
+        target.classList.add('on');
+      }
+    }
+    else {
+      target.classList.remove('on');
+    }
+  }
+}
+exports.handleToggle = handleToggle;

package/lib/index.js

@@ -19,6 +19,22 @@ __export(require("./useView"));
 __export(require("./useEdit"));
 __export(require("./useSearch"));
 __export(require("./useMessage"));
+function checked(s, v) {
+  if (s) {
+    if (Array.isArray(s)) {
+      return s.includes(v);
+    }
+    else {
+      return s === v;
+    }
+  }
+  return false;
+}
+exports.checked = checked;
+function value(obj) {
+  return (obj ? obj : {});
+}
+exports.value = value;
 exports.withDefaultProps = function (Component) {
   return function (props) {
     return React.createElement(Component, { props: props, history: props.history });

package/lib/useEdit.js

@@ -39,20 +39,20 @@ exports.useEditProps = function (props, refForm, initialState, service, p2, p) {
     var keys;
     if (p && !p.keys && service && service.metadata) {
       var metadata = (p.metadata ? p.metadata : service.metadata());
-      var meta = edit_1.build(metadata);
-      keys = (p.keys ? p.keys : (meta ? meta.keys : undefined));
-      var version = (p.version ? p.version : (meta ? meta.version : undefined));
-      p.keys = keys;
-      p.version = version;
+      if (metadata) {
+        var meta = edit_1.build(metadata);
+        keys = (p.keys ? p.keys : (meta ? meta.keys : undefined));
+        var version = (p.version ? p.version : (meta ? meta.version : undefined));
+        p.keys = keys;
+        p.version = version;
+      }
     }
     var id = core_1.buildId(props, keys);
-    if (id) {
-      if (p && p.initialize) {
-        p.initialize(id, baseProps.load, baseProps.setState, p.callback);
-      }
-      else {
-        baseProps.load(id, p ? p.callback : undefined);
-      }
+    if (p && p.initialize) {
+      p.initialize(id, baseProps.load, baseProps.setState, p.callback);
+    }
+    else {
+      baseProps.load(id, p ? p.callback : undefined);
     }
   }, []);
   return __assign({}, baseProps);

package/lib/useSearch.js

@@ -70,6 +70,21 @@ function mergeParam(p) {
     if (!p.pageMaxSize || p.pageMaxSize <= 0) {
       p.pageMaxSize = 7;
     }
+    if (p.hideFilter === undefined) {
+      p.hideFilter = true;
+    }
+    if (p.addable === undefined) {
+      p.addable = true;
+    }
+    if (p.editable === undefined) {
+      p.editable = true;
+    }
+    if (p.approvable === undefined) {
+      p.approvable = true;
+    }
+    if (p.deletable === undefined) {
+      p.deletable = true;
+    }
     return p;
   }
   else {
@@ -77,7 +92,12 @@ function mergeParam(p) {
       sequenceNo: 'sequenceNo',
       pageSize: 24,
       pageSizes: core_1.pageSizes,
-      pageMaxSize: 7
+      pageMaxSize: 7,
+      hideFilter: true,
+      addable: true,
+      editable: true,
+      approvable: true,
+      deletable: true
     };
   }
 }
@@ -136,7 +156,9 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
   };
   var _c = merge_1.useMergeState(p), component = _c[0], setComponent = _c[1];
   var toggleFilter = function (event) {
-    setComponent({ hideFilter: !component.hideFilter });
+    var x = !component.hideFilter;
+    core_1.handleToggle(event.target, !x);
+    setComponent({ hideFilter: x });
   };
   var add = function (event) {
     event.preventDefault();
@@ -305,7 +327,6 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
   var _showResults = function (s, sr, lc) {
     var results = sr.list;
     if (results && results.length > 0) {
-      debugger;
       search_core_1.formatResults(results, component.pageIndex, component.pageSize, component.pageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
     }
     var am = component.appendMode;
@@ -365,7 +386,9 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
     getCurrencyCode: getCurrencyCode,
     updateDateState: updateDateState, resource: p1.resource.resource(), setComponent: setComponent,
     component: component, showMessage: p1.showMessage, load: load,
-    add: add, searchOnClick: search, sort: sort,
+    add: add,
+    search: search,
+    sort: sort,
     changeView: changeView,
     showMore: showMore,
     toggleFilter: toggleFilter,

package/package.json

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

package/src/components.ts

@@ -2,7 +2,7 @@ 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, hideLoading, showLoading} from './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 {formatDiffModel, getDataFields} from './diff';
 import {build, createModel as createModel2, EditParameter, GenericService, handleStatus, handleVersion, initPropertyNullInModel, ResultInfo} from './edit';
@@ -54,7 +54,7 @@ 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;
@@ -301,6 +301,7 @@ export class BaseSearchComponent<T, F 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);
 
@@ -388,8 +389,10 @@ export class BaseSearchComponent<T, F 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: F, autoSearch: boolean): void {
     const obj2 = initFilter(s, this);
@@ -1023,11 +1026,9 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
     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);
-    }
+    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;

package/src/core.ts

@@ -105,9 +105,9 @@ export interface ViewParameter {
   loading?: LoadingService;
 }
 export interface ViewService<T, ID> {
-  metadata?(): Attributes;
+  metadata?(): Attributes|undefined;
   keys?(): string[];
-  load(id: ID, ctx?: any): Promise<T>;
+  load(id: ID, ctx?: any): Promise<T|null>;
 }
 
 export interface DiffParameter {
@@ -236,7 +236,7 @@ export interface ErrorMessage {
   message?: string;
 }
 export interface UIService {
-  getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string|number|boolean;
+  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;
@@ -380,7 +380,7 @@ export function formatCurrency(currency: string|number, locale?: Locale, currenc
 }
 */
 
-export function initForm(form: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement {
+export function initForm(form?: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement|undefined {
   if (form) {
     setTimeout(() => {
       if (initMat) {
@@ -496,3 +496,14 @@ export function getDecodeFromForm(u?: UIParameter, d?: (form: HTMLFormElement, l
   }
   return (u && u.ui ? u.ui.decodeFromForm : undefined);
 }
+export function handleToggle(target?: HTMLInputElement, on?: boolean): void {
+  if (target) {
+    if (on) {
+      if (!target.classList.contains('on')) {
+        target.classList.add('on');
+      }
+    } else {
+      target.classList.remove('on');
+    }
+  }
+}

package/src/index.ts

@@ -16,6 +16,19 @@ export * from './useEdit';
 export * from './useSearch';
 export * from './useMessage';
 
+export function checked(s: string[]|string|undefined, v: string): boolean|undefined {
+  if (s) {
+    if (Array.isArray(s)) {
+      return s.includes(v);
+    } else {
+      return s === v;
+    }
+  }
+  return false;
+}
+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 });

package/src/useEdit.ts

@@ -40,7 +40,7 @@ export interface BaseEditComponentParam<T, ID> {
   fail?: (result: ResultInfo<T>) => void;
   postSave?: (obj: T, res: number|ResultInfo<T>, version?: string, backOnSave?: boolean) => void;
   handleDuplicateKey?: (result?: ResultInfo<T>) => void;
-  load?: (i: ID, callback?: (m: T, showM: (m2: T) => void) => void) => void;
+  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
 }
@@ -57,11 +57,11 @@ export interface HookBaseEditParameter<T, ID, S> extends BaseEditComponentParam<
   loading?: LoadingService;
 }
 export interface EditComponentParam<T, ID, S> extends BaseEditComponentParam<T, ID> {
-  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;
+  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> {
-  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;
+  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> {
@@ -98,19 +98,19 @@ export const useEditProps = <T, ID, S, P extends RouteComponentProps>(
     let keys: string[]|undefined;
     if (p && !p.keys && service && service.metadata) {
       const metadata = (p.metadata ? p.metadata : service.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;
+      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>(props, keys);
-    if (id) {
-      if (p && p.initialize) {
-        p.initialize(id, baseProps.load, baseProps.setState, p.callback);
-      } else {
-        baseProps.load(id, p ? p.callback : undefined);
-      }
+    if (p && p.initialize) {
+      p.initialize(id, baseProps.load, baseProps.setState, p.callback);
+    } else {
+      baseProps.load(id, p ? p.callback : undefined);
     }
   }, []);
   return {...baseProps};
@@ -404,7 +404,7 @@ export const useCoreEdit = <T, ID, S, P>(
   };
   const doSave = (p && p.doSave ? p.doSave : _doSave);
 
-  const _load = (_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) => {
+  const _load = (_id: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) => {
     const id: any = _id;
     if (id != null && id !== '') {
       setRunning(true);

package/src/useSearch.ts

@@ -3,7 +3,7 @@ import {RouteComponentProps} from 'react-router';
 import {useHistory, useRouteMatch} from 'react-router-dom';
 import {clone} from 'reflectx';
 import {addParametersIntoUrl, append, buildMessage, Filter, formatResults, getFieldsFromForm, getModel, handleAppend, handleSort, initFilter, mergeFilter as mergeFilter2, Pagination, removeSortStatus, showPaging, Sortable, validate} from 'search-core';
-import {error, getDecodeFromForm, getName, getRemoveError, getValidateForm, hideLoading, initForm, Locale, PageChange, pageSizes, removeFormError, ResourceService, SearchParameter, SearchResult, SearchService, showLoading} from './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 {buildFromUrl} from './route';
 import {enLocale} from './state';
@@ -58,8 +58,14 @@ export interface HookPropsSearchParameter<T, S extends Filter, ST, P extends Rou
   initialize?: (ld: (s: S, auto?: boolean) => void, setState2: DispatchWithCallback<Partial<ST>>, com?: SearchComponentState<T, S>) => void;
 }
 export interface SearchComponentParam<T, M extends Filter> {
+  addable?: boolean;
+  editable?: boolean;
+  approvable?: boolean;
+  deletable?: boolean;
+
   keys?: string[];
   sequenceNo?: string;
+  hideFilter?: boolean;
   name?: string;
   fields?: string[];
   appendMode?: boolean;
@@ -121,7 +127,7 @@ export interface SearchComponentState<T, S> extends Pagination, Sortable {
 
   pageMaxSize?: number;
   pageSizes?: number[];
-  excluding?: any;
+  excluding?: string[]|number[];
   hideFilter?: boolean;
 
   ignoreUrlParam?: boolean;
@@ -146,13 +152,33 @@ function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): Search
     if (!p.pageMaxSize || p.pageMaxSize <= 0) {
       p.pageMaxSize = 7;
     }
+    if (p.hideFilter === undefined) {
+      p.hideFilter = true;
+    }
+    if (p.addable === undefined) {
+      p.addable = true;
+    }
+    if (p.editable === undefined) {
+      p.editable = true;
+    }
+    if (p.approvable === undefined) {
+      p.approvable = true;
+    }
+    if (p.deletable === undefined) {
+      p.deletable = true;
+    }
     return p;
   } else {
     return {
       sequenceNo: 'sequenceNo',
       pageSize: 24,
       pageSizes,
-      pageMaxSize: 7
+      pageMaxSize: 7,
+      hideFilter: true,
+      addable: true,
+      editable: true,
+      approvable: true,
+      deletable: true
     };
   }
 }
@@ -229,8 +255,10 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   // const p = createSearchComponentState<T, S>(p1);
   const [component, setComponent] = useMergeState<SearchComponentState<T, S>>(p);
 
-  const toggleFilter = (event: any): void => {
-    setComponent({ hideFilter: !component.hideFilter });
+  const toggleFilter = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+    const x = !component.hideFilter;
+    handleToggle(event.target as HTMLInputElement, !x);
+    setComponent({ hideFilter: x });
   };
 
   const add = (event: any) => {
@@ -409,7 +437,6 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   const _showResults = (s: S, sr: SearchResult<T>, lc: Locale) => {
     const results = sr.list;
     if (results && results.length > 0) {
-      debugger;
       formatResults(results, component.pageIndex, component.pageSize, component.pageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
     }
     const am = component.appendMode;
@@ -476,7 +503,7 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     showMessage: p1.showMessage,
     load,
     add,
-    searchOnClick: search,
+    search,
     sort,
     changeView,
     showMore,

package/tsconfig.json

@@ -14,7 +14,8 @@
     "removeComments": true,
     "lib": [
       "dom",
-      "es6"
+      "es6",
+      "es7"
     ]
   },
   "include": [