@etsoo/react 1.7.11 → 1.7.12

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.
Files changed (4) hide show
  1. package/lib/app/ReactUtils.d.ts +16 -2
  2. package/lib/app/ReactUtils.js +70 -8
  3. package/package.json +7 -7
  4. package/src/app/ReactUtils.ts +77 -10
package/lib/app/ReactUtils.d.ts CHANGED
@@ -10,12 +10,26 @@ export declare namespace ReactUtils {
10
10
  * @returns Formatted value
11
11
  */
12
12
  function formatInputValue(value: unknown): string | number | any[] | undefined;
13
+ /**
14
+ * Get nested value
15
+ * @param data Data
16
+ * @param name Field name, support property chain like 'jsonData.logSize'
17
+ * @returns Result
18
+ */
19
+ function getNestedValue(data: object, name: string): any;
13
20
  /**
14
21
  * Is safe click
15
22
  * @param event Mouse event
16
23
  * @returns Result
17
24
  */
18
25
  function isSafeClick(event: React.MouseEvent<HTMLElement>): boolean;
26
+ /**
27
+ * Set nested value
28
+ * @param data Data
29
+ * @param name Field name, support property chain like 'jsonData.logSize'
30
+ * @param value Value
31
+ */
32
+ function setNestedValue(data: object, name: string, value: unknown): void;
19
33
  /**
20
34
  * Trigger input change event
21
35
  * @param input Form input
@@ -29,12 +43,12 @@ export declare namespace ReactUtils {
29
43
  * @param data Data
30
44
  * @param callback Callback to update refs' value, return false continue to process
31
45
  */
32
- function updateRefs<D, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T, value: D[keyof D & string]) => void | boolean) | keyof T): void;
46
+ function updateRefs<D extends object, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T, value: D[keyof D & string]) => void | boolean) | keyof T): void;
33
47
  /**
34
48
  * Update data with refs
35
49
  * @param refs Refs
36
50
  * @param data Data
37
51
  * @param callback Callback to return new value
38
52
  */
39
- function updateRefValues<D, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T) => any) | keyof T): void;
53
+ function updateRefValues<D extends object, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | undefined>>>, data: D, callback?: ((item: T) => any) | keyof T): void;
40
54
  }
package/lib/app/ReactUtils.js CHANGED
@@ -21,6 +21,36 @@ export var ReactUtils;
21
21
  return String(value);
22
22
  }
23
23
  ReactUtils.formatInputValue = formatInputValue;
24
+ /**
25
+ * Get nested value
26
+ * @param data Data
27
+ * @param name Field name, support property chain like 'jsonData.logSize'
28
+ * @returns Result
29
+ */
30
+ function getNestedValue(data, name) {
31
+ const properties = name.split('.');
32
+ const len = properties.length;
33
+ if (len === 1) {
34
+ return Reflect.get(data, name);
35
+ }
36
+ else {
37
+ let curr = data;
38
+ for (let i = 0; i < len; i++) {
39
+ const property = properties[i];
40
+ if (i + 1 === len) {
41
+ return Reflect.get(curr, property);
42
+ }
43
+ else {
44
+ let p = Reflect.get(curr, property);
45
+ if (p == null) {
46
+ return undefined;
47
+ }
48
+ curr = p;
49
+ }
50
+ }
51
+ }
52
+ }
53
+ ReactUtils.getNestedValue = getNestedValue;
24
54
  /**
25
55
  * Is safe click
26
56
  * @param event Mouse event
@@ -47,6 +77,36 @@ export var ReactUtils;
47
77
  return true;
48
78
  }
49
79
  ReactUtils.isSafeClick = isSafeClick;
80
+ /**
81
+ * Set nested value
82
+ * @param data Data
83
+ * @param name Field name, support property chain like 'jsonData.logSize'
84
+ * @param value Value
85
+ */
86
+ function setNestedValue(data, name, value) {
87
+ const properties = name.split('.');
88
+ const len = properties.length;
89
+ if (len === 1)
90
+ Reflect.set(data, name, value);
91
+ else {
92
+ let curr = data;
93
+ for (let i = 0; i < len; i++) {
94
+ const property = properties[i];
95
+ if (i + 1 === len) {
96
+ Reflect.set(curr, property, value);
97
+ }
98
+ else {
99
+ let p = Reflect.get(curr, property);
100
+ if (p == null) {
101
+ p = {};
102
+ Reflect.set(curr, property, p);
103
+ }
104
+ curr = p;
105
+ }
106
+ }
107
+ }
108
+ }
109
+ ReactUtils.setNestedValue = setNestedValue;
50
110
  /**
51
111
  * Trigger input change event
52
112
  * @param input Form input
@@ -92,6 +152,7 @@ export var ReactUtils;
92
152
  * @param callback Callback to update refs' value, return false continue to process
93
153
  */
94
154
  function updateRefs(refs, data, callback) {
155
+ var _a;
95
156
  const local = callback == null
96
157
  ? undefined
97
158
  : typeof callback === 'function'
@@ -105,16 +166,16 @@ export var ReactUtils;
105
166
  const item = ref === null || ref === void 0 ? void 0 : ref.current;
106
167
  if (item == null)
107
168
  continue;
108
- const value = data[k];
109
- if (local && local(item, value) !== false) {
169
+ if (local && local(item, data[k]) !== false) {
110
170
  continue;
111
171
  }
112
172
  else if (item instanceof HTMLInputElement ||
113
- item instanceof HTMLTextAreaElement) {
114
- item.value = `${value !== null && value !== void 0 ? value : ''}`;
173
+ item instanceof HTMLTextAreaElement ||
174
+ item instanceof HTMLSelectElement) {
175
+ item.value = `${(_a = getNestedValue(data, item.name || k)) !== null && _a !== void 0 ? _a : ''}`;
115
176
  }
116
177
  else {
117
- item.value = value;
178
+ item.value = data[k];
118
179
  }
119
180
  }
120
181
  }
@@ -141,10 +202,11 @@ export var ReactUtils;
141
202
  data[k] = local(item);
142
203
  }
143
204
  else if (item instanceof HTMLInputElement) {
144
- data[k] = DomUtils.getInputValue(item);
205
+ setNestedValue(data, item.name || k, DomUtils.getInputValue(item));
145
206
  }
146
- else if (item instanceof HTMLTextAreaElement) {
147
- data[k] = item.value;
207
+ else if (item instanceof HTMLTextAreaElement ||
208
+ item instanceof HTMLSelectElement) {
209
+ setNestedValue(data, item.name || k, item.value);
148
210
  }
149
211
  else {
150
212
  data[k] = item.value;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.7.11",
3
+ "version": "1.7.12",
4
4
  "description": "TypeScript ReactJs UI Independent Framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,10 +50,10 @@
50
50
  "@emotion/css": "^11.11.2",
51
51
  "@emotion/react": "^11.11.1",
52
52
  "@emotion/styled": "^11.11.0",
53
- "@etsoo/appscript": "^1.4.53",
53
+ "@etsoo/appscript": "^1.4.55",
54
54
  "@etsoo/notificationbase": "^1.1.28",
55
- "@etsoo/shared": "^1.2.12",
56
- "@types/react": "^18.2.21",
55
+ "@etsoo/shared": "^1.2.13",
56
+ "@types/react": "^18.2.22",
57
57
  "@types/react-dom": "^18.2.7",
58
58
  "@types/react-window": "^1.8.5",
59
59
  "react": "^18.2.0",
@@ -63,13 +63,13 @@
63
63
  },
64
64
  "devDependencies": {
65
65
  "@babel/cli": "^7.22.15",
66
- "@babel/core": "^7.22.19",
66
+ "@babel/core": "^7.22.20",
67
67
  "@babel/plugin-transform-runtime": "^7.22.15",
68
- "@babel/preset-env": "^7.22.15",
68
+ "@babel/preset-env": "^7.22.20",
69
69
  "@babel/runtime-corejs3": "^7.22.15",
70
70
  "@testing-library/jest-dom": "^6.1.3",
71
71
  "@testing-library/react": "^14.0.0",
72
- "@types/jest": "^29.5.4",
72
+ "@types/jest": "^29.5.5",
73
73
  "jest": "^29.7.0",
74
74
  "jest-environment-jsdom": "^29.7.0",
75
75
  "ts-jest": "^29.1.1",
package/src/app/ReactUtils.ts CHANGED
@@ -22,6 +22,36 @@ export namespace ReactUtils {
22
22
  return String(value);
23
23
  }
24
24
 
25
+ /**
26
+ * Get nested value
27
+ * @param data Data
28
+ * @param name Field name, support property chain like 'jsonData.logSize'
29
+ * @returns Result
30
+ */
31
+ export function getNestedValue(data: object, name: string) {
32
+ const properties = name.split('.');
33
+ const len = properties.length;
34
+ if (len === 1) {
35
+ return Reflect.get(data, name);
36
+ } else {
37
+ let curr = data;
38
+ for (let i = 0; i < len; i++) {
39
+ const property = properties[i];
40
+
41
+ if (i + 1 === len) {
42
+ return Reflect.get(curr, property);
43
+ } else {
44
+ let p = Reflect.get(curr, property);
45
+ if (p == null) {
46
+ return undefined;
47
+ }
48
+
49
+ curr = p;
50
+ }
51
+ }
52
+ }
53
+ }
54
+
25
55
  /**
26
56
  * Is safe click
27
57
  * @param event Mouse event
@@ -52,6 +82,36 @@ export namespace ReactUtils {
52
82
  return true;
53
83
  }
54
84
 
85
+ /**
86
+ * Set nested value
87
+ * @param data Data
88
+ * @param name Field name, support property chain like 'jsonData.logSize'
89
+ * @param value Value
90
+ */
91
+ export function setNestedValue(data: object, name: string, value: unknown) {
92
+ const properties = name.split('.');
93
+ const len = properties.length;
94
+ if (len === 1) Reflect.set(data, name, value);
95
+ else {
96
+ let curr = data;
97
+ for (let i = 0; i < len; i++) {
98
+ const property = properties[i];
99
+
100
+ if (i + 1 === len) {
101
+ Reflect.set(curr, property, value);
102
+ } else {
103
+ let p = Reflect.get(curr, property);
104
+ if (p == null) {
105
+ p = {};
106
+ Reflect.set(curr, property, p);
107
+ }
108
+
109
+ curr = p;
110
+ }
111
+ }
112
+ }
113
+ }
114
+
55
115
  /**
56
116
  * Trigger input change event
57
117
  * @param input Form input
@@ -106,7 +166,7 @@ export namespace ReactUtils {
106
166
  * @param data Data
107
167
  * @param callback Callback to update refs' value, return false continue to process
108
168
  */
109
- export function updateRefs<D, T = HTMLInputElement>(
169
+ export function updateRefs<D extends object, T = HTMLInputElement>(
110
170
  refs: Partial<
111
171
  DataTypes.DI<
112
172
  ReadonlyArray<keyof D & string>,
@@ -132,17 +192,17 @@ export namespace ReactUtils {
132
192
  const ref = refs[k];
133
193
  const item = ref?.current;
134
194
  if (item == null) continue;
135
- const value = data[k];
136
195
 
137
- if (local && local(item, value) !== false) {
196
+ if (local && local(item, data[k]) !== false) {
138
197
  continue;
139
198
  } else if (
140
199
  item instanceof HTMLInputElement ||
141
- item instanceof HTMLTextAreaElement
200
+ item instanceof HTMLTextAreaElement ||
201
+ item instanceof HTMLSelectElement
142
202
  ) {
143
- item.value = `${value ?? ''}`;
203
+ item.value = `${getNestedValue(data, item.name || k) ?? ''}`;
144
204
  } else {
145
- (item as any).value = value;
205
+ (item as any).value = data[k];
146
206
  }
147
207
  }
148
208
  }
@@ -153,7 +213,7 @@ export namespace ReactUtils {
153
213
  * @param data Data
154
214
  * @param callback Callback to return new value
155
215
  */
156
- export function updateRefValues<D, T = HTMLInputElement>(
216
+ export function updateRefValues<D extends object, T = HTMLInputElement>(
157
217
  refs: Partial<
158
218
  DataTypes.DI<
159
219
  ReadonlyArray<keyof D & string>,
@@ -179,9 +239,16 @@ export namespace ReactUtils {
179
239
  if (local) {
180
240
  data[k] = local(item);
181
241
  } else if (item instanceof HTMLInputElement) {
182
- data[k] = DomUtils.getInputValue(item) as any;
183
- } else if (item instanceof HTMLTextAreaElement) {
184
- data[k] = item.value as any;
242
+ setNestedValue(
243
+ data,
244
+ item.name || k,
245
+ DomUtils.getInputValue(item)
246
+ );
247
+ } else if (
248
+ item instanceof HTMLTextAreaElement ||
249
+ item instanceof HTMLSelectElement
250
+ ) {
251
+ setNestedValue(data, item.name || k, item.value);
185
252
  } else {
186
253
  data[k] = (item as any).value;
187
254
  }