react-hook-core 0.1.16 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/com.js +1 -1
- package/lib/merge.js +1 -6
- package/lib/route.js +51 -8
- package/lib/search.js +20 -15
- package/lib/state.js +2 -1
- package/lib/update.js +23 -7
- package/lib/useEdit.js +1 -1
- package/lib/useSearch.js +9 -2
- package/package.json +1 -1
- package/src/com.ts +53 -53
- package/src/merge.ts +23 -28
- package/src/route.ts +86 -47
- package/src/search.ts +20 -13
- package/src/state.ts +9 -1
- package/src/update.ts +86 -74
- package/src/useEdit.ts +1 -1
- package/src/useSearch.ts +521 -511
package/lib/com.js
CHANGED
|
@@ -6,7 +6,7 @@ function PageSizeSelect(p) {
|
|
|
6
6
|
var g = p.sizes;
|
|
7
7
|
var s = (!g || g.length === 0 ? core_1.pageSizes : g);
|
|
8
8
|
var opts = s.map(function (pgSize) { return React.createElement('option', { key: pgSize, value: pgSize }, pgSize); });
|
|
9
|
-
return React.createElement('select', { id: p.id, name: p.name, defaultValue: p.size, onChange: p.onChange }, opts);
|
|
9
|
+
return React.createElement('select', { id: p.id, name: p.name, value: p.size, defaultValue: p.size, onChange: p.onChange }, opts);
|
|
10
10
|
}
|
|
11
11
|
exports.PageSizeSelect = PageSizeSelect;
|
|
12
12
|
function Search(p) {
|
package/lib/merge.js
CHANGED
|
@@ -4,16 +4,11 @@ var react_1 = require("react");
|
|
|
4
4
|
function useMergeState(initialState) {
|
|
5
5
|
var _a = react_1.useState(initialState ? initialState : {}), state = _a[0], _setState = _a[1];
|
|
6
6
|
var callbackRef = react_1.useRef();
|
|
7
|
-
var isFirstCallbackCall = react_1.useRef(true);
|
|
8
7
|
var setState = react_1.useCallback(function (newState, callback) {
|
|
9
8
|
callbackRef.current = callback;
|
|
10
9
|
_setState(function (prevState) { return Object.assign({}, prevState, newState); });
|
|
11
|
-
}, []);
|
|
10
|
+
}, [state]);
|
|
12
11
|
react_1.useEffect(function () {
|
|
13
|
-
if (isFirstCallbackCall.current) {
|
|
14
|
-
isFirstCallbackCall.current = false;
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
12
|
if (callbackRef.current) {
|
|
18
13
|
callbackRef.current(state);
|
|
19
14
|
}
|
package/lib/route.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var qs = require("query-string");
|
|
4
|
-
function buildFromUrl() {
|
|
5
|
-
return buildParameters(window.location.search);
|
|
4
|
+
function buildFromUrl(modelT) {
|
|
5
|
+
return buildParameters(window.location.search, modelT);
|
|
6
6
|
}
|
|
7
7
|
exports.buildFromUrl = buildFromUrl;
|
|
8
|
-
function buildParameters(url) {
|
|
8
|
+
function buildParameters(url, model) {
|
|
9
9
|
var urlSearch = url;
|
|
10
|
-
var i = urlSearch.indexOf(
|
|
10
|
+
var i = urlSearch.indexOf("?");
|
|
11
11
|
if (i >= 0) {
|
|
12
12
|
urlSearch = url.substring(i + 1);
|
|
13
13
|
}
|
|
14
14
|
try {
|
|
15
|
-
var parsed = convertToObject(qs.parse(urlSearch));
|
|
15
|
+
var parsed = convertToObject(qs.parse(urlSearch), model);
|
|
16
16
|
return parsed;
|
|
17
17
|
}
|
|
18
18
|
catch (error) {
|
|
@@ -21,17 +21,20 @@ function buildParameters(url) {
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
exports.buildParameters = buildParameters;
|
|
24
|
-
function convertToObject(input) {
|
|
24
|
+
function convertToObject(input, model) {
|
|
25
|
+
if (model) {
|
|
26
|
+
return parseToModel(input, model);
|
|
27
|
+
}
|
|
25
28
|
var output = {};
|
|
26
29
|
for (var key in input) {
|
|
27
30
|
var value = input[key];
|
|
28
|
-
var keys = key.split(
|
|
31
|
+
var keys = key.split(".");
|
|
29
32
|
var currentObj = output;
|
|
30
33
|
for (var i = 0; i < keys.length; i++) {
|
|
31
34
|
var currentKey = keys[i];
|
|
32
35
|
if (!currentObj[currentKey]) {
|
|
33
36
|
if (i === keys.length - 1) {
|
|
34
|
-
currentObj[currentKey] = value;
|
|
37
|
+
currentObj[currentKey] = parseValue(value);
|
|
35
38
|
}
|
|
36
39
|
else {
|
|
37
40
|
currentObj[currentKey] = {};
|
|
@@ -43,3 +46,43 @@ function convertToObject(input) {
|
|
|
43
46
|
return output;
|
|
44
47
|
}
|
|
45
48
|
exports.convertToObject = convertToObject;
|
|
49
|
+
function parseToModel(dest, src) {
|
|
50
|
+
if (typeof dest !== 'object' || typeof src !== 'object') {
|
|
51
|
+
return dest;
|
|
52
|
+
}
|
|
53
|
+
for (var key in src) {
|
|
54
|
+
if (!Object.hasOwn(dest, key))
|
|
55
|
+
continue;
|
|
56
|
+
if (src.hasOwnProperty(key)) {
|
|
57
|
+
if (src[key] && src[key].constructor === Object) {
|
|
58
|
+
if (!dest[key] || dest[key].constructor !== Object) {
|
|
59
|
+
dest[key] = {};
|
|
60
|
+
}
|
|
61
|
+
parseToModel(dest[key], src[key]);
|
|
62
|
+
}
|
|
63
|
+
else if (src[key] instanceof Date) {
|
|
64
|
+
dest[key] = new Date(dest[key]);
|
|
65
|
+
}
|
|
66
|
+
else if (typeof src[key] === 'boolean') {
|
|
67
|
+
if (dest[key].length > 0) {
|
|
68
|
+
dest[key] = new Boolean(dest[key]);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
else if (typeof src[key] === 'number') {
|
|
72
|
+
if (typeof dest[key] === 'string' && dest[key].indexOf(".") !== -1) {
|
|
73
|
+
dest[key] = parseFloat(dest[key]);
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
dest[key] = parseInt(dest[key], 10);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return dest;
|
|
82
|
+
}
|
|
83
|
+
function parseValue(value) {
|
|
84
|
+
if (!isNaN(value) && !isNaN(parseFloat(value))) {
|
|
85
|
+
return parseFloat(value);
|
|
86
|
+
}
|
|
87
|
+
return value;
|
|
88
|
+
}
|
package/lib/search.js
CHANGED
|
@@ -143,6 +143,7 @@ function changePage(com, pageIndex, pageSize) {
|
|
|
143
143
|
}
|
|
144
144
|
exports.changePage = changePage;
|
|
145
145
|
function optimizeFilter(obj, searchable, fields) {
|
|
146
|
+
var sLimit = searchable.limit;
|
|
146
147
|
obj.fields = fields;
|
|
147
148
|
if (searchable.pageIndex && searchable.pageIndex > 1) {
|
|
148
149
|
obj.page = searchable.pageIndex;
|
|
@@ -150,7 +151,12 @@ function optimizeFilter(obj, searchable, fields) {
|
|
|
150
151
|
else {
|
|
151
152
|
delete obj.page;
|
|
152
153
|
}
|
|
153
|
-
|
|
154
|
+
if (sLimit) {
|
|
155
|
+
obj.limit = searchable.limit;
|
|
156
|
+
}
|
|
157
|
+
else {
|
|
158
|
+
obj.limit = searchable.pageSize;
|
|
159
|
+
}
|
|
154
160
|
if (searchable.appendMode && searchable.initPageSize !== searchable.pageSize) {
|
|
155
161
|
obj.firstLimit = searchable.initPageSize;
|
|
156
162
|
}
|
|
@@ -169,24 +175,22 @@ function optimizeFilter(obj, searchable, fields) {
|
|
|
169
175
|
return obj;
|
|
170
176
|
}
|
|
171
177
|
exports.optimizeFilter = optimizeFilter;
|
|
172
|
-
function mapObjects(
|
|
178
|
+
function mapObjects(dest, src) {
|
|
173
179
|
var _a;
|
|
174
|
-
for (var key in
|
|
175
|
-
if (
|
|
176
|
-
if (Array.isArray(
|
|
177
|
-
|
|
178
|
-
if (
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
objA[key].push(objB[key]);
|
|
185
|
-
}
|
|
180
|
+
for (var key in dest) {
|
|
181
|
+
if (src.hasOwnProperty(key) && src[key] !== null && src[key] !== undefined) {
|
|
182
|
+
if (Array.isArray(dest[key]) && typeof src[key] === 'string' && src[key].length > 0) {
|
|
183
|
+
var arrayObjKeySrc = src[key].length > 0 ? (_a = (src[key])) === null || _a === void 0 ? void 0 : _a.split(',') : [];
|
|
184
|
+
if (arrayObjKeySrc && arrayObjKeySrc.length > 1) {
|
|
185
|
+
dest[key] = __spreadArrays(arrayObjKeySrc);
|
|
186
|
+
}
|
|
187
|
+
else {
|
|
188
|
+
dest[key] = [];
|
|
189
|
+
dest[key].push(src[key]);
|
|
186
190
|
}
|
|
187
191
|
}
|
|
188
192
|
else {
|
|
189
|
-
|
|
193
|
+
dest[key] = src[key];
|
|
190
194
|
}
|
|
191
195
|
}
|
|
192
196
|
}
|
|
@@ -562,6 +566,7 @@ exports.toggleSortStyle = toggleSortStyle;
|
|
|
562
566
|
function getModel(state, modelName, searchable, fields, excluding) {
|
|
563
567
|
var obj2 = getModelFromState(state, modelName);
|
|
564
568
|
var obj = obj2 ? obj2 : {};
|
|
569
|
+
console.log("getModel optimizeFilter", searchable);
|
|
565
570
|
var obj3 = optimizeFilter(obj, searchable, fields);
|
|
566
571
|
obj3.excluding = excluding;
|
|
567
572
|
return obj3;
|
package/lib/state.js
CHANGED
|
@@ -91,6 +91,7 @@ function buildState(e, state, ctrl, modelName, tloc) {
|
|
|
91
91
|
var dataField = ctrl.getAttribute('data-field');
|
|
92
92
|
var field = (dataField ? dataField : ctrl.name);
|
|
93
93
|
var model = Object.assign({}, ex);
|
|
94
|
+
var dType = 'array';
|
|
94
95
|
if (type && type.toLowerCase() === 'checkbox') {
|
|
95
96
|
var value = model[field];
|
|
96
97
|
if (ctrl.id && ctrl.name !== ctrl.id) {
|
|
@@ -123,7 +124,7 @@ function buildState(e, state, ctrl, modelName, tloc) {
|
|
|
123
124
|
var objSet = {};
|
|
124
125
|
try {
|
|
125
126
|
var selectedDate = new Date(ctrl.value);
|
|
126
|
-
reflect_1.setValue(model, field, ctrl.value && ctrl.value !== '' ? selectedDate.toISOString() :
|
|
127
|
+
reflect_1.setValue(model, field, ctrl.value && ctrl.value !== '' ? selectedDate.toISOString() : null);
|
|
127
128
|
objSet[modelName] = model;
|
|
128
129
|
return objSet;
|
|
129
130
|
}
|
package/lib/update.js
CHANGED
|
@@ -1,14 +1,30 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function (t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
14
|
var core_1 = require("./core");
|
|
4
15
|
var merge_1 = require("./merge");
|
|
5
16
|
var state_1 = require("./state");
|
|
6
|
-
var
|
|
17
|
+
var react_1 = require("react");
|
|
18
|
+
var m = "model";
|
|
7
19
|
var _getModelName = function (f2) {
|
|
8
20
|
return core_1.getModelName(f2, m);
|
|
9
21
|
};
|
|
10
22
|
exports.useUpdate = function (initialState, getName, getLocale, removeErr) {
|
|
11
23
|
var _a = merge_1.useMergeState(initialState), state = _a[0], setState = _a[1];
|
|
24
|
+
var _b = react_1.useState(false), rerender = _b[0], setRerender = _b[1];
|
|
25
|
+
react_1.useEffect(function () {
|
|
26
|
+
setRerender(!rerender);
|
|
27
|
+
}, [state]);
|
|
12
28
|
var updatePhoneState = function (event) {
|
|
13
29
|
var re = /^[0-9\b]+$/;
|
|
14
30
|
var target = event.currentTarget;
|
|
@@ -17,8 +33,8 @@ exports.useUpdate = function (initialState, getName, getLocale, removeErr) {
|
|
|
17
33
|
updateState(event);
|
|
18
34
|
}
|
|
19
35
|
else {
|
|
20
|
-
var splitArr = value.split(
|
|
21
|
-
var responseStr_1 =
|
|
36
|
+
var splitArr = value.split("");
|
|
37
|
+
var responseStr_1 = "";
|
|
22
38
|
splitArr.forEach(function (element) {
|
|
23
39
|
if (re.test(element)) {
|
|
24
40
|
responseStr_1 += element;
|
|
@@ -28,12 +44,12 @@ exports.useUpdate = function (initialState, getName, getLocale, removeErr) {
|
|
|
28
44
|
updateState(event);
|
|
29
45
|
}
|
|
30
46
|
};
|
|
31
|
-
var getModelName =
|
|
47
|
+
var getModelName = typeof getName === "function" ? getName : _getModelName;
|
|
32
48
|
var updateState = function (e, callback, lc) {
|
|
33
49
|
var ctrl = e.currentTarget;
|
|
34
50
|
var mn = m;
|
|
35
51
|
if (getName) {
|
|
36
|
-
if (typeof getName ===
|
|
52
|
+
if (typeof getName === "string") {
|
|
37
53
|
mn = getName;
|
|
38
54
|
}
|
|
39
55
|
else {
|
|
@@ -48,7 +64,7 @@ exports.useUpdate = function (initialState, getName, getLocale, removeErr) {
|
|
|
48
64
|
var objSet = state_1.buildState(e, state, ctrl, mn, l);
|
|
49
65
|
if (objSet) {
|
|
50
66
|
if (callback) {
|
|
51
|
-
setState(objSet, callback);
|
|
67
|
+
setState(__assign({}, objSet), callback);
|
|
52
68
|
}
|
|
53
69
|
else {
|
|
54
70
|
setState(objSet);
|
|
@@ -73,6 +89,6 @@ exports.useUpdate = function (initialState, getName, getLocale, removeErr) {
|
|
|
73
89
|
updateFlatState: updateFlatState,
|
|
74
90
|
getLocale: getLocale,
|
|
75
91
|
setState: setState,
|
|
76
|
-
state: state
|
|
92
|
+
state: state,
|
|
77
93
|
};
|
|
78
94
|
};
|
package/lib/useEdit.js
CHANGED
|
@@ -138,7 +138,7 @@ exports.useCoreEdit = function (refForm, initialState, service, p1, p, props) {
|
|
|
138
138
|
showModel(model);
|
|
139
139
|
};
|
|
140
140
|
var _handleNotFound = function (form) {
|
|
141
|
-
var msg = core_1.message(p1.resource.value, '
|
|
141
|
+
var msg = core_1.message(p1.resource.value, 'error_404', 'error');
|
|
142
142
|
if (form) {
|
|
143
143
|
formutil_1.readOnly(form);
|
|
144
144
|
}
|
package/lib/useSearch.js
CHANGED
|
@@ -113,7 +113,7 @@ exports.useSearch = function (refForm, initialState, service, p2, p) {
|
|
|
113
113
|
else {
|
|
114
114
|
var se = (p && p.createFilter ? p.createFilter() : undefined);
|
|
115
115
|
try {
|
|
116
|
-
var s = search_1.mergeFilter(route_1.buildFromUrl(), se, component.pageSizes);
|
|
116
|
+
var s = search_1.mergeFilter(route_1.buildFromUrl(se), se, component.pageSizes);
|
|
117
117
|
load(s, p2.auto);
|
|
118
118
|
}
|
|
119
119
|
catch (error) {
|
|
@@ -138,11 +138,15 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
|
|
|
138
138
|
var getModelName = (p && p.getModelName ? p.getModelName : _getModelName);
|
|
139
139
|
var baseProps = update_1.useUpdate(initialState, getModelName, p1.getLocale, core_1.getRemoveError(p1));
|
|
140
140
|
var state = baseProps.state, setState = baseProps.setState;
|
|
141
|
+
var _b = react_1.useState(false), rerender = _b[0], setRerender = _b[1];
|
|
142
|
+
react_1.useEffect(function () {
|
|
143
|
+
setRerender(!rerender);
|
|
144
|
+
}, [state]);
|
|
141
145
|
var _getCurrencyCode = function () {
|
|
142
146
|
return refForm && refForm.current ? refForm.current.getAttribute('currency-code') : null;
|
|
143
147
|
};
|
|
144
148
|
var getCurrencyCode = p && p.getCurrencyCode ? p.getCurrencyCode : _getCurrencyCode;
|
|
145
|
-
var
|
|
149
|
+
var _c = merge_1.useMergeState(p), component = _c[0], setComponent = _c[1];
|
|
146
150
|
var toggleFilter = function (event) {
|
|
147
151
|
var x = !component.hideFilter;
|
|
148
152
|
core_1.handleToggle(event.target, !x);
|
|
@@ -195,6 +199,9 @@ exports.useCoreSearch = function (refForm, initialState, service, p1, p2) {
|
|
|
195
199
|
var doSearch = function (se, isFirstLoad) {
|
|
196
200
|
core_1.removeFormError(p1, refForm.current);
|
|
197
201
|
var s = getFilter(se);
|
|
202
|
+
if (isFirstLoad) {
|
|
203
|
+
setState(state);
|
|
204
|
+
}
|
|
198
205
|
var isStillRunning = running;
|
|
199
206
|
validateSearch(s, function () {
|
|
200
207
|
if (isStillRunning === true) {
|
package/package.json
CHANGED
package/src/com.ts
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Locale, pageSizes } from './core';
|
|
3
|
-
|
|
4
|
-
export interface PageSizeProps {
|
|
5
|
-
id?: string;
|
|
6
|
-
name?: string;
|
|
7
|
-
size?: number;
|
|
8
|
-
sizes?: number[];
|
|
9
|
-
onChange?: React.ChangeEventHandler<HTMLSelectElement>;
|
|
10
|
-
}
|
|
11
|
-
export function PageSizeSelect(p: PageSizeProps) {
|
|
12
|
-
const g = p.sizes;
|
|
13
|
-
const s = (!g || g.length === 0 ? pageSizes : g);
|
|
14
|
-
const opts = s.map(pgSize => React.createElement('option', { key: pgSize, value: pgSize }, pgSize));
|
|
15
|
-
return React.createElement('select', { id: p.id, name: p.name, defaultValue: p.size, onChange: p.onChange }, opts);
|
|
16
|
-
}
|
|
17
|
-
export interface Props {
|
|
18
|
-
id?: string;
|
|
19
|
-
name?: string;
|
|
20
|
-
size?: number;
|
|
21
|
-
sizes?: number[];
|
|
22
|
-
className?: string;
|
|
23
|
-
maxLength?: number;
|
|
24
|
-
value?: string;
|
|
25
|
-
placeholder?: string;
|
|
26
|
-
pageSizeChanged?: (event: any) => void;
|
|
27
|
-
search?: React.MouseEventHandler<HTMLElement>;
|
|
28
|
-
toggle?: React.MouseEventHandler<HTMLElement>;
|
|
29
|
-
clear?: React.MouseEventHandler<HTMLButtonElement>;
|
|
30
|
-
onChange?: (e: any, callback?: (() => void) | undefined, lc?: Locale | undefined) => void;
|
|
31
|
-
}
|
|
32
|
-
export function Search(p: Props) {
|
|
33
|
-
return (React.createElement(React.Fragment, null,
|
|
34
|
-
React.createElement("label", { className: p.className },
|
|
35
|
-
p.pageSizeChanged && React.createElement(PageSizeSelect, { size: p.size, sizes: p.sizes, onChange: p.pageSizeChanged, name: p.name, id: p.id }),
|
|
36
|
-
React.createElement("input", { type: 'text', id: 'q', name: 'q', value: p.value || '', onChange: p.onChange, maxLength: p.maxLength, placeholder: p.placeholder }),
|
|
37
|
-
p.clear && React.createElement("button", { type: 'button', hidden: !p.value, className: 'btn-remove-text', onClick: p.clear }),
|
|
38
|
-
p.toggle && React.createElement("button", { type: 'button', className: 'btn-filter', onClick: p.toggle }),
|
|
39
|
-
p.search && React.createElement("button", { type: 'submit', className: 'btn-search', onClick: p.search }))));
|
|
40
|
-
/*
|
|
41
|
-
return (
|
|
42
|
-
<>
|
|
43
|
-
<label className={p.className}>
|
|
44
|
-
{p.pageSizeChanged && <PageSizeSelect size={p.size} sizes={p.sizes} onChange={p.pageSizeChanged} name={p.name} id={p.id} />}
|
|
45
|
-
<input type='text' id='q' name='q' value={p.value || ''} onChange={p.onChange} maxLength={p.maxLength} placeholder={p.placeholder} />
|
|
46
|
-
{p.clear && <button type='button' hidden={!p.value} className='btn-remove-text' onClick={p.clear}/>}
|
|
47
|
-
{p.toggle && <button type='button' className='btn-filter' onClick={p.toggle} />}
|
|
48
|
-
{p.search && <button type='submit' className='btn-search' onClick={p.search} />}
|
|
49
|
-
</label>
|
|
50
|
-
</>
|
|
51
|
-
);
|
|
52
|
-
*/
|
|
53
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Locale, pageSizes } from './core';
|
|
3
|
+
|
|
4
|
+
export interface PageSizeProps {
|
|
5
|
+
id?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
size?: number;
|
|
8
|
+
sizes?: number[];
|
|
9
|
+
onChange?: React.ChangeEventHandler<HTMLSelectElement>;
|
|
10
|
+
}
|
|
11
|
+
export function PageSizeSelect(p: PageSizeProps) {
|
|
12
|
+
const g = p.sizes;
|
|
13
|
+
const s = (!g || g.length === 0 ? pageSizes : g);
|
|
14
|
+
const opts = s.map(pgSize => React.createElement('option', { key: pgSize, value: pgSize }, pgSize));
|
|
15
|
+
return React.createElement('select', { id: p.id, name: p.name, value: p.size, defaultValue: p.size, onChange: p.onChange }, opts);
|
|
16
|
+
}
|
|
17
|
+
export interface Props {
|
|
18
|
+
id?: string;
|
|
19
|
+
name?: string;
|
|
20
|
+
size?: number;
|
|
21
|
+
sizes?: number[];
|
|
22
|
+
className?: string;
|
|
23
|
+
maxLength?: number;
|
|
24
|
+
value?: string;
|
|
25
|
+
placeholder?: string;
|
|
26
|
+
pageSizeChanged?: (event: any) => void;
|
|
27
|
+
search?: React.MouseEventHandler<HTMLElement>;
|
|
28
|
+
toggle?: React.MouseEventHandler<HTMLElement>;
|
|
29
|
+
clear?: React.MouseEventHandler<HTMLButtonElement>;
|
|
30
|
+
onChange?: (e: any, callback?: (() => void) | undefined, lc?: Locale | undefined) => void;
|
|
31
|
+
}
|
|
32
|
+
export function Search(p: Props) {
|
|
33
|
+
return (React.createElement(React.Fragment, null,
|
|
34
|
+
React.createElement("label", { className: p.className },
|
|
35
|
+
p.pageSizeChanged && React.createElement(PageSizeSelect, { size: p.size, sizes: p.sizes, onChange: p.pageSizeChanged, name: p.name, id: p.id }),
|
|
36
|
+
React.createElement("input", { type: 'text', id: 'q', name: 'q', value: p.value || '', onChange: p.onChange, maxLength: p.maxLength, placeholder: p.placeholder }),
|
|
37
|
+
p.clear && React.createElement("button", { type: 'button', hidden: !p.value, className: 'btn-remove-text', onClick: p.clear }),
|
|
38
|
+
p.toggle && React.createElement("button", { type: 'button', className: 'btn-filter', onClick: p.toggle }),
|
|
39
|
+
p.search && React.createElement("button", { type: 'submit', className: 'btn-search', onClick: p.search }))));
|
|
40
|
+
/*
|
|
41
|
+
return (
|
|
42
|
+
<>
|
|
43
|
+
<label className={p.className}>
|
|
44
|
+
{p.pageSizeChanged && <PageSizeSelect size={p.size} sizes={p.sizes} onChange={p.pageSizeChanged} name={p.name} id={p.id} />}
|
|
45
|
+
<input type='text' id='q' name='q' value={p.value || ''} onChange={p.onChange} maxLength={p.maxLength} placeholder={p.placeholder} />
|
|
46
|
+
{p.clear && <button type='button' hidden={!p.value} className='btn-remove-text' onClick={p.clear}/>}
|
|
47
|
+
{p.toggle && <button type='button' className='btn-filter' onClick={p.toggle} />}
|
|
48
|
+
{p.search && <button type='submit' className='btn-search' onClick={p.search} />}
|
|
49
|
+
</label>
|
|
50
|
+
</>
|
|
51
|
+
);
|
|
52
|
+
*/
|
|
53
|
+
}
|
package/src/merge.ts
CHANGED
|
@@ -1,28 +1,23 @@
|
|
|
1
|
-
import {useCallback, useEffect, useRef, useState} from 'react';
|
|
2
|
-
|
|
3
|
-
export type Callback<T> = (value?: T) => void;
|
|
4
|
-
export type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void;
|
|
5
|
-
|
|
6
|
-
export function useMergeState<T>(initialState?: T | (() => T)): [T, DispatchWithCallback<Partial<T>>] {
|
|
7
|
-
const [state, _setState] = useState(initialState ? initialState : {} as any);
|
|
8
|
-
|
|
9
|
-
const callbackRef = useRef<Callback<T>>();
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
}, [state]);
|
|
26
|
-
|
|
27
|
-
return [state, setState];
|
|
28
|
-
}
|
|
1
|
+
import {useCallback, useEffect, useRef, useState} from 'react';
|
|
2
|
+
|
|
3
|
+
export type Callback<T> = (value?: T) => void;
|
|
4
|
+
export type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void;
|
|
5
|
+
|
|
6
|
+
export function useMergeState<T>(initialState?: T | (() => T)): [T, DispatchWithCallback<Partial<T>>] {
|
|
7
|
+
const [state, _setState] = useState(initialState ? initialState : {} as any);
|
|
8
|
+
|
|
9
|
+
const callbackRef = useRef<Callback<T>>();
|
|
10
|
+
|
|
11
|
+
const setState = useCallback((newState: Partial<T>, callback?: Callback<T>): void => {
|
|
12
|
+
callbackRef.current = callback;
|
|
13
|
+
_setState((prevState: any) => Object.assign({}, prevState, newState));
|
|
14
|
+
}, [state]);
|
|
15
|
+
|
|
16
|
+
useEffect( () => {
|
|
17
|
+
if (callbackRef.current) {
|
|
18
|
+
callbackRef.current(state);
|
|
19
|
+
}
|
|
20
|
+
}, [state]);
|
|
21
|
+
|
|
22
|
+
return [state, setState];
|
|
23
|
+
}
|
package/src/route.ts
CHANGED
|
@@ -1,47 +1,86 @@
|
|
|
1
|
-
import * as qs from
|
|
2
|
-
|
|
3
|
-
export function buildFromUrl<S>(): S {
|
|
4
|
-
return buildParameters(window.location.search);
|
|
5
|
-
}
|
|
6
|
-
export function buildParameters<T>(url: string): T {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
1
|
+
import * as qs from "query-string";
|
|
2
|
+
|
|
3
|
+
export function buildFromUrl<S>(modelT?: S): S {
|
|
4
|
+
return buildParameters<S>(window.location.search, modelT);
|
|
5
|
+
}
|
|
6
|
+
export function buildParameters<T>(url: string, model?: T): T {
|
|
7
|
+
let urlSearch = url;
|
|
8
|
+
const i = urlSearch.indexOf("?");
|
|
9
|
+
if (i >= 0) {
|
|
10
|
+
urlSearch = url.substring(i + 1);
|
|
11
|
+
}
|
|
12
|
+
try {
|
|
13
|
+
const parsed: any = convertToObject<T>(qs.parse(urlSearch), model);
|
|
14
|
+
return parsed;
|
|
15
|
+
} catch (error) {
|
|
16
|
+
console.log(error);
|
|
17
|
+
throw error;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export function convertToObject<T>(input: any, model?: T): T {
|
|
22
|
+
if (model){
|
|
23
|
+
return parseToModel(input, model);
|
|
24
|
+
}
|
|
25
|
+
const output: any = {};
|
|
26
|
+
|
|
27
|
+
for (let key in input) {
|
|
28
|
+
const value = input[key];
|
|
29
|
+
const keys = key.split(".");
|
|
30
|
+
|
|
31
|
+
let currentObj: any = output;
|
|
32
|
+
for (let i = 0; i < keys.length; i++) {
|
|
33
|
+
const currentKey = keys[i];
|
|
34
|
+
|
|
35
|
+
if (!currentObj[currentKey]) {
|
|
36
|
+
if (i === keys.length - 1) {
|
|
37
|
+
currentObj[currentKey] = parseValue(value);
|
|
38
|
+
} else {
|
|
39
|
+
currentObj[currentKey] = {};
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
currentObj = currentObj[currentKey];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return output as T;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function parseToModel(dest: any, src: any) {
|
|
51
|
+
if (typeof dest !== 'object' || typeof src !== 'object') {
|
|
52
|
+
return dest;
|
|
53
|
+
}
|
|
54
|
+
for (let key in src) {
|
|
55
|
+
if (!Object.hasOwn(dest, key)) continue;
|
|
56
|
+
if (src.hasOwnProperty(key)) {
|
|
57
|
+
if (src[key] && src[key].constructor === Object) {
|
|
58
|
+
if (!dest[key] || dest[key].constructor !== Object) {
|
|
59
|
+
dest[key] = {};
|
|
60
|
+
}
|
|
61
|
+
parseToModel(dest[key], src[key]);
|
|
62
|
+
} else if (src[key] instanceof Date) {
|
|
63
|
+
dest[key] = new Date(dest[key]);
|
|
64
|
+
} else if (typeof src[key] === 'boolean') {
|
|
65
|
+
if (dest[key].length >0){
|
|
66
|
+
dest[key] = new Boolean(dest[key]);
|
|
67
|
+
}
|
|
68
|
+
} else if (typeof src[key] === 'number') {
|
|
69
|
+
if ( typeof dest[key] === 'string' && dest[key].indexOf(".") !== -1){
|
|
70
|
+
dest[key] = parseFloat(dest[key]);
|
|
71
|
+
}else{
|
|
72
|
+
dest[key] = parseInt(dest[key], 10);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
return dest;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function parseValue(value: any): any {
|
|
81
|
+
// Check if the value is a string representing a number and parse it to a number
|
|
82
|
+
if (!isNaN(value) && !isNaN(parseFloat(value))) {
|
|
83
|
+
return parseFloat(value);
|
|
84
|
+
}
|
|
85
|
+
return value;
|
|
86
|
+
}
|