react-hook-core 0.1.5 → 0.1.8

package/lib/com.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var core_1 = require("./core");
+function PageSizeSelect(p) {
+  var g = p.sizes;
+  var s = (!g || g.length === 0 ? core_1.pageSizes : g);
+  var opts = s.map(function (pgSize) { return React.createElement('option', { key: pgSize, value: pgSize }, pgSize); });
+  return React.createElement('select', { id: p.id, name: p.name, defaultValue: p.size, onChange: p.onChange }, opts);
+}
+exports.PageSizeSelect = PageSizeSelect;
+function Search(p) {
+  return (React.createElement(React.Fragment, null, React.createElement("label", { className: p.className }, p.pageSizeChanged && React.createElement(PageSizeSelect, { size: p.size, sizes: p.sizes, onChange: p.pageSizeChanged, name: p.name, id: p.id }), React.createElement("input", { type: 'text', id: 'q', name: 'q', value: p.value || '', onChange: p.onChange, maxLength: p.maxLength, placeholder: p.placeholder }), p.clear && React.createElement("button", { type: 'button', hidden: !p.value, className: 'btn-remove-text', onClick: p.clear }), p.toggle && React.createElement("button", { type: 'button', className: 'btn-filter', onClick: p.toggle }), p.search && React.createElement("button", { type: 'submit', className: 'btn-search', onClick: p.search }))));
+}
+exports.Search = Search;

package/lib/core.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var formutil_1 = require("./formutil");
 exports.pageSizes = [12, 24, 60, 100, 120, 180, 300, 600];
+exports.size = exports.pageSizes;
 function createEditStatus(status) {
   if (status) {
     return status;

package/lib/index.js

@@ -19,7 +19,7 @@ __export(require("./useEdit"));
 __export(require("./components"));
 __export(require("./search"));
 __export(require("./reflect"));
-var core_1 = require("./core");
+__export(require("./com"));
 function checked(s, v) {
   if (s) {
     if (Array.isArray(s)) {
@@ -51,11 +51,3 @@ exports.Loading = function (props) {
     return (React.createElement('div', { className: 'loader-wrapper' }, React.createElement('div', { className: 'loader-sign', style: loadingStyle }, React.createElement('div', { className: 'loader' }))));
   }
 };
-function PageSizeSelect(p) {
-  var g = p.sizes;
-  var s = (!g || g.length === 0 ? core_1.pageSizes : g);
-  var opts = s.map(function (pgSize) { return React.createElement('option', { key: pgSize, value: pgSize }, pgSize); });
-  return React.createElement('select', { id: p.id, name: p.name, defaultValue: p.size, onChange: p.onChange }, opts);
-}
-exports.PageSizeSelect = PageSizeSelect;
-exports.default = PageSizeSelect;

package/lib/useSearch.js

@@ -98,6 +98,7 @@ function mergeParam(p) {
     };
   }
 }
+exports.mergeParam = mergeParam;
 exports.useSearch = function (refForm, initialState, service, p2, p) {
   var baseProps = exports.useCoreSearch(refForm, initialState, service, p2, p);
   react_1.useEffect(function () {
@@ -123,7 +124,7 @@ exports.useSearchOneProps = function (p) {
 exports.useSearchOne = function (p) {
   return exports.useCoreSearch(p.refForm, p.initialState, p.service, p, p);
 };
-exports.useCoreSearch = function (refForm, initialState, service, p1, p2, props) {
+exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
   var p = mergeParam(p2);
   var _a = react_1.useState(), running = _a[0], setRunning = _a[1];
   var _getModelName = function () {
@@ -149,7 +150,7 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2, props)
     return fs;
   };
   var getFields = p && p.getFields ? p.getFields : _getFields;
-  var getFilter = function (se) {
+  var _getFilter = function (se) {
     if (!se) {
       se = component;
     }
@@ -167,6 +168,7 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2, props)
     var obj3 = search_1.getModel(state, n, se, fs, se.excluding, keys, se.list, refForm.current, core_1.getDecodeFromForm(p1), lc, cc);
     return obj3;
   };
+  var getFilter = p && p.getFilter ? p.getFilter : _getFilter;
   var _setFilter = function (s) {
     var objSet = {};
     var n = getModelName();
@@ -225,12 +227,15 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2, props)
     });
     doSearch(component);
   };
-  var clearQ = function (event) {
+  var clearQ = function (e) {
+    if (e) {
+      e.preventDefault();
+    }
     var n = getModelName();
     if (n && n.length > 0) {
       var m = state[n];
       if (m) {
-        m.keyword = '';
+        m.q = '';
         var setObj = {};
         setObj[n] = m;
         setState(setObj);
@@ -370,7 +375,9 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2, props)
     toggleFilter: toggleFilter,
     doSearch: doSearch,
     pageChanged: pageChanged,
-    pageSizeChanged: pageSizeChanged, clearKeyworkOnClick: clearQ, showResults: showResults,
+    pageSizeChanged: pageSizeChanged,
+    clearQ: clearQ,
+    showResults: showResults,
     getFields: getFields,
     getModelName: getModelName, format: p ? p.format : undefined
   });

package/package.json

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

package/src/com.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Locale, pageSizes } from './core';
+
+export interface PageSizeProps {
+  id?: string;
+  name?: string;
+  size?: number;
+  sizes?: number[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+export function PageSizeSelect(p: PageSizeProps) {
+  const g = p.sizes;
+  const s = (!g || g.length === 0 ? pageSizes : g);
+  const opts = s.map(pgSize => React.createElement('option', { key: pgSize, value: pgSize }, pgSize));
+  return React.createElement('select', { id: p.id, name: p.name, defaultValue: p.size, onChange: p.onChange }, opts);
+}
+export interface Props {
+  id?: string;
+  name?: string;
+  size?: number;
+  sizes?: number[];
+  className?: string;
+  maxLength?: number;
+  value?: string;
+  placeholder?: string;
+  pageSizeChanged?: (event: any) => void;
+  search?: React.MouseEventHandler<HTMLElement>;
+  toggle?: React.MouseEventHandler<HTMLElement>;
+  clear?: React.MouseEventHandler<HTMLButtonElement>;
+  onChange?: (e: any, callback?: (() => void) | undefined, lc?: Locale | undefined) => void;
+}
+export function Search(p: Props) {
+  return (React.createElement(React.Fragment, null,
+    React.createElement("label", { className: p.className },
+      p.pageSizeChanged && React.createElement(PageSizeSelect, { size: p.size, sizes: p.sizes, onChange: p.pageSizeChanged, name: p.name, id: p.id }),
+      React.createElement("input", { type: 'text', id: 'q', name: 'q', value: p.value || '', onChange: p.onChange, maxLength: p.maxLength, placeholder: p.placeholder }),
+      p.clear && React.createElement("button", { type: 'button', hidden: !p.value, className: 'btn-remove-text', onClick: p.clear }),
+      p.toggle && React.createElement("button", { type: 'button', className: 'btn-filter', onClick: p.toggle }),
+      p.search && React.createElement("button", { type: 'submit', className: 'btn-search', onClick: p.search }))));
+  /*
+  return (
+    <>
+      <label className={p.className}>
+        {p.pageSizeChanged && <PageSizeSelect size={p.size} sizes={p.sizes} onChange={p.pageSizeChanged} name={p.name} id={p.id} />}
+        <input type='text' id='q' name='q' value={p.value || ''} onChange={p.onChange} maxLength={p.maxLength} placeholder={p.placeholder} />
+        {p.clear && <button type='button' hidden={!p.value} className='btn-remove-text' onClick={p.clear}/>}
+        {p.toggle && <button type='button' className='btn-filter' onClick={p.toggle} />}
+        {p.search && <button type='submit' className='btn-search' onClick={p.search} />}
+      </label>
+    </>
+  );
+  */
+}

package/src/core.ts

@@ -2,6 +2,7 @@ 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;
 }

package/src/index.ts

@@ -14,8 +14,7 @@ export * from './useEdit';
 export * from './components';
 export * from './search';
 export * from './reflect';
-
-import {pageSizes} from './core';
+export * from './com';
 
 export function checked(s: string[]|string|undefined, v: string): boolean|undefined {
   if (s) {
@@ -55,17 +54,4 @@ export const Loading = (props: LoadingProps) => {
     );*/
   }
 };
-export interface Props {
-  id?: string;
-  name?: string;
-  size?: number;
-  sizes?: number[];
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
-}
-export function PageSizeSelect(p: Props) {
-  const g = p.sizes;
-  const s = (!g || g.length === 0 ? pageSizes : g);
-  const opts = s.map(pgSize => React.createElement('option', { key: pgSize, value: pgSize }, pgSize));
-  return React.createElement('select', { id: p.id, name: p.name, defaultValue: p.size, onChange: p.onChange }, opts);
-}
-export default PageSizeSelect;
+export type OnClick = React.MouseEvent<HTMLElement, MouseEvent>;

package/src/useSearch.ts

@@ -84,7 +84,7 @@ export interface SearchComponentParam<T, M extends Filter> {
   getModelName?: () => string;
   getCurrencyCode?: () => string;
   setFilter?: (s: M) => void;
-  getFilter?: () => M;
+  getFilter?: (se?: Searchable<T>) => M;
   getFields?: () => string[]|undefined;
   validateSearch?: (se: M, callback: () => void) => void;
   // prepareCustomData?: (data: any) => void;
@@ -142,7 +142,7 @@ export interface SearchComponentState<T, S> extends Pagination, Sortable {
   deletable?: boolean;
 }
 
-function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): SearchComponentParam<T, S> {
+export function mergeParam<T, S extends Filter>(p?: SearchComponentParam<T, S>): SearchComponentParam<T, S> {
   if (p) {
     if (!p.sequenceNo) {
       p.sequenceNo = 'sequenceNo';
@@ -218,13 +218,12 @@ export const useSearchOneProps = <T, S extends Filter, ST extends SearchComponen
 export const useSearchOne = <T, S extends Filter, ST extends SearchComponentState<T, S>>(p: HookBaseSearchParameter<T, S, ST>) => {
   return useCoreSearch(p.refForm, p.initialState, p.service, p, p);
 };
-export const useCoreSearch = <T, S extends Filter, ST, P>(
+export const useCoreSearch = <T, S extends Filter, ST>(
   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>,
-  props?: P
+  p2?: SearchComponentParam<T, S>
 ) => {
   const p = mergeParam(p2);
   const [running, setRunning] = useState<boolean>();
@@ -260,7 +259,7 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
   };
   const getFields = p && p.getFields ? p.getFields : _getFields;
 
-  const getFilter = (se?: Searchable<T>): S => {
+  const _getFilter = (se?: Searchable<T>): S => {
     if (!se) {
       se = component;
     }
@@ -278,6 +277,7 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     const obj3 = getModel<T, S>(state, n, se, fs, se.excluding, keys, se.list, refForm.current, getDecodeFromForm(p1), lc, cc);
     return obj3;
   };
+  const getFilter = p && p.getFilter ? p.getFilter : _getFilter;
   const _setFilter = (s: S): void => {
     const objSet: any = {};
     const n = getModelName();
@@ -341,12 +341,15 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     doSearch(component);
   };
 
-  const clearQ = (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const clearQ = (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    if (e) {
+      e.preventDefault();
+    }
     const n = getModelName();
     if (n && n.length > 0) {
       const m = (state as any)[n];
       if (m) {
-        m.keyword = '';
+        m.q = '';
         const setObj: any = {};
         setObj[n] = m;
         setState(setObj);
@@ -495,7 +498,7 @@ export const useCoreSearch = <T, S extends Filter, ST, P>(
     doSearch,
     pageChanged,
     pageSizeChanged,
-    clearKeyworkOnClick: clearQ,
+    clearQ,
     showResults,
     getFields,
     getModelName,

package/lib/router.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var react_router_dom_1 = require("react-router-dom");
-exports.useRouter = function () {
-  var _a = [react_router_dom_1.useLocation(), react_router_dom_1.useHistory(), react_router_dom_1.useParams(), react_router_dom_1.useRouteMatch()], location = _a[0], history = _a[1], params = _a[2], match = _a[3];
-  var navigate = function (targetUrl) {
-    return function (e) {
-      if (e) {
-        e.preventDefault();
-      }
-      history.push(targetUrl);
-    };
-  };
-  var back = function (e) {
-    if (e) {
-      e.preventDefault();
-    }
-    history.goBack();
-  };
-  return react_1.useMemo(function () {
-    return ({
-      push: history.push,
-      replace: history.replace,
-      pathname: location.pathname,
-      goBack: history.goBack,
-      match: match,
-      location: location,
-      history: history,
-      params: params,
-      navigate: navigate,
-      back: back
-    });
-  }, [match, location, history, params]);
-};

package/src/router.ts

@@ -1,39 +0,0 @@
-import {useMemo} from 'react';
-import {useHistory, useLocation, useParams, useRouteMatch} from 'react-router-dom';
-
-export const useRouter = () => {
-  const [location, history, params, match] = [useLocation(), useHistory(), useParams(), useRouteMatch()];
-/*
-  const searchQueries = useMemo(() => {
-    return queryString.parse(location.search, { arrayFormat: 'comma', parseNumbers: true });
-  }, [location.search]);
-*/
-  const navigate = (targetUrl: string) => (e: React.MouseEvent) => {
-    if (e) {
-      e.preventDefault();
-    }
-    history.push(targetUrl);
-  };
-
-
-  const back = (e: React.MouseEvent) => {
-    if (e) {
-      e.preventDefault();
-    }
-    history.goBack();
-  };
-
-  return useMemo(() => ({
-    push: history.push,
-    replace: history.replace,
-    pathname: location.pathname,
-    goBack: history.goBack,
-    match,
-    location,
-    history,
-    params,
-    // searchQueries,
-    navigate,
-    back
-  }), [match, location, history, params]);
-};