react-hook-core 0.1.4 → 0.1.7

package/lib/useEdit.js

@@ -12,21 +12,50 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var reflectx_1 = require("reflectx");
+var react_router_1 = require("react-router");
 var core_1 = require("./core");
 var edit_1 = require("./edit");
 var formutil_1 = require("./formutil");
 var merge_1 = require("./merge");
-var router_1 = require("./router");
+var reflect_1 = require("./reflect");
 var state_1 = require("./state");
 var update_1 = require("./update");
-function prepareData(data) {
-}
-exports.useEdit = function (refForm, initialState, service, p1, p2) {
-  return exports.useCoreEdit(undefined, refForm, initialState, service, p1, p2);
+exports.useEdit = function (refForm, initialState, service, p2, p) {
+  var params = react_router_1.useParams();
+  var baseProps = exports.useCoreEdit(refForm, initialState, service, p2, p);
+  react_1.useEffect(function () {
+    if (refForm) {
+      var registerEvents = (p2.ui ? p2.ui.registerEvents : undefined);
+      core_1.initForm(baseProps.refForm.current, registerEvents);
+    }
+    var n = baseProps.getModelName(refForm.current);
+    var obj = {};
+    obj[n] = baseProps.createNewModel();
+    baseProps.setState(obj);
+    var keys;
+    if (p && !p.keys && service && service.metadata) {
+      var metadata = (p.metadata ? p.metadata : service.metadata());
+      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(params, keys);
+    if (p && p.initialize) {
+      p.initialize(id, baseProps.load, baseProps.setState, p.callback);
+    }
+    else {
+      baseProps.load(id, p ? p.callback : undefined);
+    }
+  }, []);
+  return __assign({}, baseProps);
 };
 exports.useEditProps = function (props, refForm, initialState, service, p2, p) {
-  var baseProps = exports.useCoreEdit(props, refForm, initialState, service, p2, p);
+  var params = react_router_1.useParams();
+  var baseProps = exports.useCoreEdit(refForm, initialState, service, p2, p, props);
   react_1.useEffect(function () {
     if (refForm) {
       var registerEvents = (p2.ui ? p2.ui.registerEvents : undefined);
@@ -47,7 +76,7 @@ exports.useEditProps = function (props, refForm, initialState, service, p2, p) {
         p.version = version;
       }
     }
-    var id = core_1.buildId(props, keys);
+    var id = core_1.buildId(params, keys);
     if (p && p.initialize) {
       p.initialize(id, baseProps.load, baseProps.setState, p.callback);
     }
@@ -63,14 +92,14 @@ exports.useEditOneProps = function (p) {
 exports.useEditOne = function (p) {
   return exports.useEdit(p.refForm, p.initialState, p.service, p, p);
 };
-exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
+exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
+  var navigate = react_router_1.useNavigate();
   var addable = (p && p.patchable !== false ? true : undefined);
-  var goBack = router_1.useRouter().goBack;
   var back = function (event) {
     if (event) {
       event.preventDefault();
     }
-    goBack();
+    navigate(-1);
   };
   var _a = react_1.useState(), running = _a[0], setRunning = _a[1];
   var getModelName = function (f) {
@@ -80,19 +109,6 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
     return core_1.getModelName(f);
   };
   var baseProps = update_1.useUpdate(initialState, getModelName, p1.getLocale);
-  var prepareCustomData = (p && p.prepareCustomData ? p.prepareCustomData : prepareData);
-  var updateDateState = function (name, value) {
-    var _a, _b, _c, _d, _e;
-    var modelName = getModelName(refForm.current);
-    var currentState = state[modelName];
-    if (props && props.setGlobalState) {
-      var data = props.shouldBeCustomized ? prepareCustomData((_a = {}, _a[name] = value, _a)) : (_b = {}, _b[name] = value, _b);
-      props.setGlobalState((_c = {}, _c[modelName] = __assign(__assign({}, currentState), data), _c));
-    }
-    else {
-      setState((_d = {}, _d[modelName] = __assign(__assign({}, currentState), (_e = {}, _e[name] = value, _e)), _d));
-    }
-  };
   var state = baseProps.state, setState = baseProps.setState;
   var _b = merge_1.useMergeState({
     newMode: false,
@@ -189,7 +205,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
         });
       }
       else {
-        var diffObj_1 = reflectx_1.makeDiff(edit_1.initPropertyNullInModel(flag.originalModel, metadata), obj_1, keys, version_1);
+        var diffObj_1 = reflect_1.makeDiff(edit_1.initPropertyNullInModel(flag.originalModel, metadata), obj_1, keys, version_1);
         var objKeys = Object.keys(diffObj_1);
         if (objKeys.length === 0) {
           p1.showMessage(p1.resource.value('msg_no_change'));
@@ -228,7 +244,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
       var model = result.value;
       setFlag({ newMode: false });
       if (model && flag.setBack === true) {
-        resetState(false, model, reflectx_1.clone(model));
+        resetState(false, model, reflect_1.clone(model));
       }
       else {
         edit_1.handleVersion(obj, version);
@@ -347,7 +363,7 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
           handleNotFound(refForm.current);
         }
         else {
-          setFlag({ newMode: false, originalModel: reflectx_1.clone(obj) });
+          setFlag({ newMode: false, originalModel: reflect_1.clone(obj) });
           if (callback) {
             callback(obj, showModel);
           }
@@ -395,7 +411,6 @@ exports.useCoreEdit = function (props, refForm, initialState, service, p1, p) {
     refForm: refForm, ui: p1.ui, resource: p1.resource.resource(), flag: flag,
     running: running,
     setRunning: setRunning,
-    updateDateState: updateDateState,
     showModel: showModel,
     getModelName: getModelName,
     resetState: resetState,

package/lib/useSearch.js

@@ -12,18 +12,15 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var react_router_dom_1 = require("react-router-dom");
-var reflectx_1 = require("reflectx");
-var search_core_1 = require("search-core");
 var core_1 = require("./core");
 var merge_1 = require("./merge");
+var reflect_1 = require("./reflect");
 var route_1 = require("./route");
+var search_1 = require("./search");
 var state_1 = require("./state");
 var update_1 = require("./update");
-function prepareData(data) {
-}
 exports.callSearch = function (se, search3, showResults3, searchError3, lc, nextPageToken) {
-  var s = reflectx_1.clone(se);
+  var s = reflect_1.clone(se);
   var page = se.page;
   if (!page || page < 1) {
     page = 1;
@@ -50,7 +47,7 @@ exports.callSearch = function (se, search3, showResults3, searchError3, lc, next
   }).catch(function (err) { return searchError3(err); });
 };
 var appendListOfState = function (results, list, setState2) {
-  var arr = search_core_1.append(list, results);
+  var arr = search_1.append(list, results);
   setState2({ list: arr });
 };
 var setListOfState = function (list, setState2) {
@@ -101,8 +98,9 @@ function mergeParam(p) {
     };
   }
 }
+exports.mergeParam = mergeParam;
 exports.useSearch = function (refForm, initialState, service, p2, p) {
-  var baseProps = exports.useCoreSearch(undefined, refForm, initialState, service, p2, p);
+  var baseProps = exports.useCoreSearch(refForm, initialState, service, p2, p);
   react_1.useEffect(function () {
     var load = baseProps.load, setState = baseProps.setState, component = baseProps.component;
     if (refForm) {
@@ -114,7 +112,7 @@ exports.useSearch = function (refForm, initialState, service, p2, p) {
     }
     else {
       var se = (p && p.createFilter ? p.createFilter() : undefined);
-      var s = search_core_1.mergeFilter(route_1.buildFromUrl(), se, component.pageSizes);
+      var s = search_1.mergeFilter(route_1.buildFromUrl(), se, component.pageSizes);
       load(s, p2.auto);
     }
   }, []);
@@ -124,54 +122,35 @@ exports.useSearchOneProps = function (p) {
   return exports.useSearch(p.refForm, p.initialState, p.service, p, p);
 };
 exports.useSearchOne = function (p) {
-  return exports.useCoreSearch(undefined, p.refForm, p.initialState, p.service, p, p);
+  return exports.useCoreSearch(p.refForm, p.initialState, p.service, p, p);
 };
-exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2) {
+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 () {
     return core_1.getName('filter', p && p.name ? p.name : undefined);
   };
   var getModelName = (p && p.getModelName ? p.getModelName : _getModelName);
-  var baseProps = (props ? update_1.useUpdateWithProps(props, initialState, getModelName, p1.getLocale, core_1.getRemoveError(p1), p ? p.prepareCustomData : undefined) : update_1.useUpdate(initialState, getModelName, p1.getLocale, core_1.getRemoveError(p1)));
+  var baseProps = update_1.useUpdate(initialState, getModelName, p1.getLocale, core_1.getRemoveError(p1));
   var state = baseProps.state, setState = baseProps.setState;
-  var _b = [react_router_dom_1.useHistory(), react_router_dom_1.useRouteMatch()], history = _b[0], match = _b[1];
   var _getCurrencyCode = function () {
     return refForm && refForm.current ? refForm.current.getAttribute('currency-code') : null;
   };
   var getCurrencyCode = p && p.getCurrencyCode ? p.getCurrencyCode : _getCurrencyCode;
-  var prepareCustomData = (p && p.prepareCustomData ? p.prepareCustomData : prepareData);
-  var updateDateState = function (name, value) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var modelName = getModelName();
-    var currentState = state[modelName];
-    if (props && props.setGlobalState) {
-      var data = props.shouldBeCustomized ? prepareCustomData((_a = {}, _a[name] = value, _a)) : (_b = {}, _b[name] = value, _b);
-      props.setGlobalState((_c = {}, _c[modelName] = __assign(__assign({}, currentState), data), _c));
-    }
-    else {
-      setState((_d = {}, _d[modelName] = __assign(__assign({}, currentState), (_e = {}, _e[name] = value, _e)), _d));
-    }
-    setState((_f = {}, _f[modelName] = __assign(__assign({}, currentState), (_g = {}, _g[name] = value, _g)), _f));
-  };
-  var _c = merge_1.useMergeState(p), component = _c[0], setComponent = _c[1];
+  var _b = merge_1.useMergeState(p), component = _b[0], setComponent = _b[1];
   var toggleFilter = function (event) {
     var x = !component.hideFilter;
     core_1.handleToggle(event.target, !x);
     setComponent({ hideFilter: x });
   };
-  var add = function (event) {
-    event.preventDefault();
-    history.push(match.url + '/add');
-  };
   var _getFields = function () {
     var fields = component.fields, initFields = component.initFields;
-    var fs = search_core_1.getFieldsFromForm(fields, initFields, refForm.current);
+    var fs = search_1.getFieldsFromForm(fields, initFields, refForm.current);
     setComponent({ fields: fs, initFields: true });
     return fs;
   };
   var getFields = p && p.getFields ? p.getFields : _getFields;
-  var getFilter = function (se) {
+  var _getFilter = function (se) {
     if (!se) {
       se = component;
     }
@@ -186,9 +165,10 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
     }
     var lc = (p1.getLocale ? p1.getLocale() : state_1.enLocale);
     var cc = getCurrencyCode();
-    var obj3 = search_core_1.getModel(state, n, se, fs, se.excluding, keys, se.list, refForm.current, core_1.getDecodeFromForm(p1), lc, cc);
+    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();
@@ -198,7 +178,7 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
   var setFilter = p && p.setFilter ? p.setFilter : _setFilter;
   var _load = function (s, auto) {
     var com = Object.assign({}, component);
-    var obj2 = search_core_1.initFilter(s, com);
+    var obj2 = search_1.initFilter(s, com);
     setComponent(com);
     setFilter(obj2);
     var runSearch = doSearch;
@@ -220,7 +200,7 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
       setRunning(true);
       core_1.showLoading(p1.loading);
       if (p && !p.ignoreUrlParam) {
-        search_core_1.addParametersIntoUrl(s, isFirstLoad);
+        search_1.addParametersIntoUrl(s, isFirstLoad);
       }
       var lc = p1.getLocale ? p1.getLocale() : state_1.enLocale;
       if (typeof service === 'function') {
@@ -232,7 +212,7 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
     });
   };
   var _validateSearch = function (se, callback) {
-    search_core_1.validate(se, callback, refForm.current, (p1.getLocale ? p1.getLocale() : undefined), core_1.getValidateForm(p1));
+    search_1.validate(se, callback, refForm.current, (p1.getLocale ? p1.getLocale() : undefined), core_1.getValidateForm(p1));
   };
   var validateSearch = p && p.validateSearch ? p.validateSearch : _validateSearch;
   var pageSizeChanged = function (event) {
@@ -247,12 +227,15 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
     });
     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);
@@ -270,7 +253,7 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
     event.preventDefault();
     if (event && event.target) {
       var target = event.target;
-      var s = search_core_1.handleSort(target, component.sortTarget, component.sortField, component.sortType);
+      var s = search_1.handleSort(target, component.sortTarget, component.sortField, component.sortType);
       setComponent({
         sortField: s.field,
         sortType: s.type,
@@ -305,7 +288,7 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
       return;
     }
     setComponent({ pageIndex: 1, tmpPageIndex: 1 });
-    search_core_1.removeSortStatus(component.sortTarget);
+    search_1.removeSortStatus(component.sortTarget);
     setComponent({
       sortTarget: undefined,
       sortField: undefined,
@@ -327,7 +310,7 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
   var _showResults = function (s, sr, lc) {
     var results = sr.list;
     if (results && results.length > 0) {
-      search_core_1.formatResults(results, component.pageIndex, component.pageSize, component.pageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
+      search_1.formatResults(results, component.pageIndex, component.pageSize, component.pageSize, p ? p.sequenceNo : undefined, p ? p.format : undefined, lc);
     }
     var am = component.appendMode;
     var pi = (s.page && s.page >= 1 ? s.page : 1);
@@ -337,7 +320,7 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
       if ((!s.page || s.page <= 1) && s.firstLimit && s.firstLimit > 0) {
         limit = s.firstLimit;
       }
-      search_core_1.handleAppend(component, sr.list, limit, sr.nextPageToken);
+      search_1.handleAppend(component, sr.list, limit, sr.nextPageToken);
       if (component.append && (s.page && s.page > 1)) {
         appendList(results, component.list, setState);
       }
@@ -346,11 +329,11 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
       }
     }
     else {
-      search_core_1.showPaging(component, sr.list, s.limit, sr.total);
+      search_1.showPaging(component, sr.list, s.limit, sr.total);
       setList(results, setState);
       setComponent({ tmpPageIndex: s.page });
       if (s.limit) {
-        var m1 = search_core_1.buildMessage(p1.resource, s.page, s.limit, sr.list, sr.total);
+        var m1 = search_1.buildMessage(p1.resource, s.page, s.limit, sr.list, sr.total);
         p1.showMessage(m1);
       }
     }
@@ -383,10 +366,8 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
   return __assign(__assign({}, baseProps), {
     running: running,
     setRunning: setRunning,
-    getCurrencyCode: getCurrencyCode,
-    updateDateState: updateDateState, resource: p1.resource.resource(), setComponent: setComponent,
+    getCurrencyCode: getCurrencyCode, resource: p1.resource.resource(), setComponent: setComponent,
     component: component, showMessage: p1.showMessage, load: load,
-    add: add,
     search: search,
     sort: sort,
     changeView: changeView,
@@ -394,7 +375,9 @@ exports.useCoreSearch = function (props, refForm, initialState, service, p1, p2)
     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/lib/useView.js

@@ -12,25 +12,42 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
+var react_router_1 = require("react-router");
 var core_1 = require("./core");
 var formutil_1 = require("./formutil");
 var merge_1 = require("./merge");
-var router_1 = require("./router");
-exports.useViewOneProps = function (p) {
-  return exports.useViewProps(p.props, p.refForm, p.initialState, p.service, p, p);
-};
 exports.useViewOne = function (p) {
-  return exports.useView(p.refForm, p.initialState, p.service, p, p);
+  return exports.useCoreView(p.refForm, p.initialState, p.service, p, p);
 };
 exports.useView = function (refForm, initialState, service, p1, p) {
+  var baseProps = exports.useCoreView(refForm, initialState, service, p1, p);
+  var _a = merge_1.useMergeState(initialState), setState = _a[1];
+  var params = react_router_1.useParams();
+  react_1.useEffect(function () {
+    if (baseProps.refForm) {
+      core_1.initForm(baseProps.refForm.current);
+    }
+    var id = core_1.buildId(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 __assign({}, baseProps);
+};
+exports.useCoreView = function (refForm, initialState, service, p1, p) {
   var _a = merge_1.useMergeState(initialState), state = _a[0], setState = _a[1];
   var _b = react_1.useState(), running = _b[0], setRunning = _b[1];
-  var goBack = router_1.useRouter().goBack;
+  var navigate = react_router_1.useNavigate();
   var back = function (event) {
     if (event) {
       event.preventDefault();
     }
-    goBack();
+    navigate(-1);
   };
   var getModelName = function (f) {
     if (p && p.name) {
@@ -107,22 +124,3 @@ exports.useView = function (refForm, initialState, service, p1, p) {
     back: back
   };
 };
-exports.useViewProps = function (props, refForm, initialState, service, p1, p) {
-  var baseProps = exports.useView(refForm, initialState, service, p1, p);
-  var _a = merge_1.useMergeState(initialState), state = _a[0], setState = _a[1];
-  react_1.useEffect(function () {
-    if (baseProps.refForm) {
-      core_1.initForm(baseProps.refForm.current);
-    }
-    var id = core_1.buildId(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 __assign({}, baseProps);
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-core",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "react",
   "main": "./lib/index.js",
   "types": "./src/index.ts",
@@ -9,13 +9,11 @@
     "clean:lib": "rimraf lib"
   },
   "devDependencies": {
-    "@types/react": "^16.9.1",
-    "@types/react-router-dom": "^5.1.6",
+    "@types/react": "^17.0.41",
+    "@types/react-router-dom": "^5.3.3",
     "query-string": "^6.13.1",
-    "react": "^16.8.0",
-    "react-router-dom": "^5.2.0",
-    "reflectx": "^0.0.10",
-    "search-core": "^0.1.1",
+    "react": "^17.0.2",
+    "react-router-dom": "^6.2.2",
     "tslint": "^5.10.0",
     "typescript": "^3.3.3333"
   },

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<HTMLElement>;
+  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>
+    </>
+  );
+  */
+}