@etsoo/materialui 1.2.26 → 1.2.27

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 (5) hide show
  1. package/lib/Tiplist.js +20 -15
  2. package/lib/TiplistPro.js +20 -15
  3. package/package.json +1 -1
  4. package/src/Tiplist.tsx +23 -17
  5. package/src/TiplistPro.tsx +21 -17
package/lib/Tiplist.js CHANGED
@@ -11,7 +11,7 @@ import { InputField } from "./InputField";
11
11
  * @returns Component
12
12
  */
13
13
  export function Tiplist(props) {
14
- var _a, _b;
14
+ var _a;
15
15
  // Labels
16
16
  const { noOptions, loading, more, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
17
17
  // Destruct
@@ -41,9 +41,12 @@ export function Tiplist(props) {
41
41
  if (localValue != null)
42
42
  stateUpdate({ value: localValue });
43
43
  }, [localValue]);
44
- // State
45
- const [state] = React.useState({});
46
- const isMounted = React.useRef(true);
44
+ // Ref
45
+ const state = React.useRef({
46
+ idLoaded: false,
47
+ idSet: false,
48
+ isMounted: false
49
+ });
47
50
  // Add readOnly
48
51
  const addReadOnly = (params) => {
49
52
  if (readOnly != null) {
@@ -87,7 +90,7 @@ export function Tiplist(props) {
87
90
  stateUpdate({ loading: true });
88
91
  // Load list
89
92
  loadData(keyword, id, maxItems).then((options) => {
90
- if (!isMounted.current)
93
+ if (!state.current.isMounted)
91
94
  return;
92
95
  if (options != null && options.length >= maxItems) {
93
96
  options.push({ [idField]: "n/a" });
@@ -123,42 +126,44 @@ export function Tiplist(props) {
123
126
  if (localIdValue == null) {
124
127
  if (inputValue != null)
125
128
  setInputValue(null);
129
+ return;
126
130
  }
127
- else if (state.idLoaded) {
128
- state.idLoaded = false;
129
- state.idSet = false;
131
+ if (state.current.idLoaded) {
132
+ state.current.idLoaded = false;
133
+ state.current.idSet = false;
130
134
  }
131
135
  }, [localIdValue]);
132
136
  React.useEffect(() => {
133
137
  if (localIdValue != null && localIdValue !== "") {
134
- if (state.idLoaded) {
138
+ if (state.current.idLoaded) {
135
139
  // Set default
136
- if (!state.idSet && states.options.length > 0) {
140
+ if (!state.current.idSet && states.options.length > 0) {
137
141
  const item = states.options.find((o) => o[idField] === localIdValue);
138
142
  if (item) {
139
143
  stateUpdate({
140
144
  value: states.options[0]
141
145
  });
142
- state.idSet = true;
146
+ state.current.idSet = true;
143
147
  }
144
148
  }
145
149
  }
146
150
  else {
147
151
  // Load id data
148
152
  loadDataDirect(undefined, localIdValue);
149
- state.idLoaded = true;
153
+ state.current.idLoaded = true;
150
154
  }
151
155
  }
152
- }, [state.idLoaded, state.idSet, localIdValue, states.options]);
156
+ }, [localIdValue, states.options]);
153
157
  React.useEffect(() => {
158
+ state.current.isMounted = true;
154
159
  return () => {
155
- isMounted.current = false;
160
+ state.current.isMounted = false;
156
161
  delayed.clear();
157
162
  };
158
163
  }, []);
159
164
  // Layout
160
165
  return (React.createElement("div", null,
161
- React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: `${(_b = inputValue !== null && inputValue !== void 0 ? inputValue : localIdValue) !== null && _b !== void 0 ? _b : ""}`, readOnly: true, onChange: inputOnChange }),
166
+ React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : (state.current.idSet ? "" : localIdValue !== null && localIdValue !== void 0 ? localIdValue : "")}`, readOnly: true, onChange: inputOnChange }),
162
167
  React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
163
168
  // Set value
164
169
  setInputValue(value);
package/lib/TiplistPro.js CHANGED
@@ -9,7 +9,7 @@ import { globalApp } from "./app/ReactApp";
9
9
  * @returns Component
10
10
  */
11
11
  export function TiplistPro(props) {
12
- var _a, _b;
12
+ var _a;
13
13
  // Labels
14
14
  const { noOptions, loading, more, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
15
15
  // Destruct
@@ -41,9 +41,12 @@ export function TiplistPro(props) {
41
41
  const inputValue = React.useMemo(() => states.value && typeof states.value === "object"
42
42
  ? states.value.id
43
43
  : undefined, [states.value]);
44
- // State
45
- const [state] = React.useState({});
46
- const isMounted = React.useRef(true);
44
+ // Ref
45
+ const state = React.useRef({
46
+ idLoaded: false,
47
+ idSet: false,
48
+ isMounted: false
49
+ });
47
50
  // Change handler
48
51
  const changeHandle = (event) => {
49
52
  // Stop processing with auto trigger event
@@ -77,7 +80,7 @@ export function TiplistPro(props) {
77
80
  stateUpdate({ loading: true });
78
81
  // Load list
79
82
  loadData(keyword, id, maxItems).then((options) => {
80
- if (!isMounted.current)
83
+ if (!state.current.isMounted)
81
84
  return;
82
85
  if (options != null && options.length >= maxItems) {
83
86
  options.push({ id: -1, name: "n/a" });
@@ -113,39 +116,41 @@ export function TiplistPro(props) {
113
116
  if (localIdValue == null) {
114
117
  if (inputValue != null)
115
118
  setInputValue(null);
119
+ return;
116
120
  }
117
- else if (state.idLoaded) {
118
- state.idLoaded = false;
119
- state.idSet = false;
121
+ if (state.current.idLoaded) {
122
+ state.current.idLoaded = false;
123
+ state.current.idSet = false;
120
124
  }
121
125
  }, [localIdValue]);
122
126
  React.useEffect(() => {
123
127
  if (localIdValue != null && localIdValue !== "") {
124
- if (state.idLoaded) {
128
+ if (state.current.idLoaded) {
125
129
  // Set default
126
- if (!state.idSet && states.options.length > 0) {
130
+ if (!state.current.idSet && states.options.length > 0) {
127
131
  stateUpdate({
128
132
  value: states.options.find((o) => o.id === localIdValue)
129
133
  });
130
- state.idSet = true;
134
+ state.current.idSet = true;
131
135
  }
132
136
  }
133
137
  else {
134
138
  // Load id data
135
139
  loadDataDirect(undefined, localIdValue);
136
- state.idLoaded = true;
140
+ state.current.idLoaded = true;
137
141
  }
138
142
  }
139
- }, [state.idLoaded, state.idSet, localIdValue, states.options]);
143
+ }, [localIdValue, states.options]);
140
144
  React.useEffect(() => {
145
+ state.current.isMounted = true;
141
146
  return () => {
142
- isMounted.current = false;
147
+ state.current.isMounted = false;
143
148
  delayed.clear();
144
149
  };
145
150
  }, []);
146
151
  // Layout
147
152
  return (React.createElement("div", null,
148
- React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: (_b = inputValue !== null && inputValue !== void 0 ? inputValue : localIdValue) !== null && _b !== void 0 ? _b : "", readOnly: true, onChange: inputOnChange }),
153
+ React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: inputValue !== null && inputValue !== void 0 ? inputValue : (state.current.idSet ? "" : localIdValue !== null && localIdValue !== void 0 ? localIdValue : ""), readOnly: true, onChange: inputOnChange }),
149
154
  React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
150
155
  if (typeof value === "object") {
151
156
  // Set value
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.2.26",
3
+ "version": "1.2.27",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/Tiplist.tsx CHANGED
@@ -129,12 +129,12 @@ export function Tiplist<
129
129
  if (localValue != null) stateUpdate({ value: localValue });
130
130
  }, [localValue]);
131
131
 
132
- // State
133
- const [state] = React.useState<{
134
- idLoaded?: boolean;
135
- idSet?: boolean;
136
- }>({});
137
- const isMounted = React.useRef(true);
132
+ // Ref
133
+ const state = React.useRef({
134
+ idLoaded: false,
135
+ idSet: false,
136
+ isMounted: false
137
+ });
138
138
 
139
139
  // Add readOnly
140
140
  const addReadOnly = (params: AutocompleteRenderInputParams) => {
@@ -189,7 +189,7 @@ export function Tiplist<
189
189
 
190
190
  // Load list
191
191
  loadData(keyword, id, maxItems).then((options) => {
192
- if (!isMounted.current) return;
192
+ if (!state.current.isMounted) return;
193
193
 
194
194
  if (options != null && options.length >= maxItems) {
195
195
  options.push({ [idField]: "n/a" } as T);
@@ -228,36 +228,40 @@ export function Tiplist<
228
228
  React.useEffect(() => {
229
229
  if (localIdValue == null) {
230
230
  if (inputValue != null) setInputValue(null);
231
- } else if (state.idLoaded) {
232
- state.idLoaded = false;
233
- state.idSet = false;
231
+ return;
232
+ }
233
+
234
+ if (state.current.idLoaded) {
235
+ state.current.idLoaded = false;
236
+ state.current.idSet = false;
234
237
  }
235
238
  }, [localIdValue]);
236
239
 
237
240
  React.useEffect(() => {
238
241
  if (localIdValue != null && (localIdValue as any) !== "") {
239
- if (state.idLoaded) {
242
+ if (state.current.idLoaded) {
240
243
  // Set default
241
- if (!state.idSet && states.options.length > 0) {
244
+ if (!state.current.idSet && states.options.length > 0) {
242
245
  const item = states.options.find((o) => o[idField] === localIdValue);
243
246
  if (item) {
244
247
  stateUpdate({
245
248
  value: states.options[0]
246
249
  });
247
- state.idSet = true;
250
+ state.current.idSet = true;
248
251
  }
249
252
  }
250
253
  } else {
251
254
  // Load id data
252
255
  loadDataDirect(undefined, localIdValue);
253
- state.idLoaded = true;
256
+ state.current.idLoaded = true;
254
257
  }
255
258
  }
256
- }, [state.idLoaded, state.idSet, localIdValue, states.options]);
259
+ }, [localIdValue, states.options]);
257
260
 
258
261
  React.useEffect(() => {
262
+ state.current.isMounted = true;
259
263
  return () => {
260
- isMounted.current = false;
264
+ state.current.isMounted = false;
261
265
  delayed.clear();
262
266
  };
263
267
  }, []);
@@ -271,7 +275,9 @@ export function Tiplist<
271
275
  type="text"
272
276
  style={{ display: "none" }}
273
277
  name={name}
274
- value={`${inputValue ?? localIdValue ?? ""}`}
278
+ value={`${
279
+ inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")
280
+ }`}
275
281
  readOnly
276
282
  onChange={inputOnChange}
277
283
  />
package/src/TiplistPro.tsx CHANGED
@@ -152,12 +152,12 @@ export function TiplistPro<T extends ListType2 = ListType2>(
152
152
  [states.value]
153
153
  );
154
154
 
155
- // State
156
- const [state] = React.useState<{
157
- idLoaded?: boolean;
158
- idSet?: boolean;
159
- }>({});
160
- const isMounted = React.useRef(true);
155
+ // Ref
156
+ const state = React.useRef({
157
+ idLoaded: false,
158
+ idSet: false,
159
+ isMounted: false
160
+ });
161
161
 
162
162
  // Change handler
163
163
  const changeHandle = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -199,7 +199,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
199
199
 
200
200
  // Load list
201
201
  loadData(keyword, id, maxItems).then((options) => {
202
- if (!isMounted.current) return;
202
+ if (!state.current.isMounted) return;
203
203
 
204
204
  if (options != null && options.length >= maxItems) {
205
205
  options.push({ id: -1, name: "n/a" } as T);
@@ -238,33 +238,37 @@ export function TiplistPro<T extends ListType2 = ListType2>(
238
238
  React.useEffect(() => {
239
239
  if (localIdValue == null) {
240
240
  if (inputValue != null) setInputValue(null);
241
- } else if (state.idLoaded) {
242
- state.idLoaded = false;
243
- state.idSet = false;
241
+ return;
242
+ }
243
+
244
+ if (state.current.idLoaded) {
245
+ state.current.idLoaded = false;
246
+ state.current.idSet = false;
244
247
  }
245
248
  }, [localIdValue]);
246
249
 
247
250
  React.useEffect(() => {
248
251
  if (localIdValue != null && (localIdValue as any) !== "") {
249
- if (state.idLoaded) {
252
+ if (state.current.idLoaded) {
250
253
  // Set default
251
- if (!state.idSet && states.options.length > 0) {
254
+ if (!state.current.idSet && states.options.length > 0) {
252
255
  stateUpdate({
253
256
  value: states.options.find((o) => o.id === localIdValue)
254
257
  });
255
- state.idSet = true;
258
+ state.current.idSet = true;
256
259
  }
257
260
  } else {
258
261
  // Load id data
259
262
  loadDataDirect(undefined, localIdValue);
260
- state.idLoaded = true;
263
+ state.current.idLoaded = true;
261
264
  }
262
265
  }
263
- }, [state.idLoaded, state.idSet, localIdValue, states.options]);
266
+ }, [localIdValue, states.options]);
264
267
 
265
268
  React.useEffect(() => {
269
+ state.current.isMounted = true;
266
270
  return () => {
267
- isMounted.current = false;
271
+ state.current.isMounted = false;
268
272
  delayed.clear();
269
273
  };
270
274
  }, []);
@@ -278,7 +282,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
278
282
  type="text"
279
283
  style={{ display: "none" }}
280
284
  name={name}
281
- value={inputValue ?? localIdValue ?? ""}
285
+ value={inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}
282
286
  readOnly
283
287
  onChange={inputOnChange}
284
288
  />