@etsoo/materialui 1.6.24 → 1.6.25

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 (9) hide show
  1. package/lib/cjs/ResponsibleContainer.js +2 -1
  2. package/lib/cjs/SearchBar.d.ts +4 -0
  3. package/lib/cjs/SearchBar.js +7 -4
  4. package/lib/mjs/ResponsibleContainer.js +2 -1
  5. package/lib/mjs/SearchBar.d.ts +4 -0
  6. package/lib/mjs/SearchBar.js +7 -4
  7. package/package.json +2 -2
  8. package/src/ResponsibleContainer.tsx +2 -1
  9. package/src/SearchBar.tsx +12 -3
package/lib/cjs/ResponsibleContainer.js CHANGED
@@ -89,8 +89,9 @@ function ResponsibleContainer(props) {
89
89
  if (lastRect != null &&
90
90
  state.mounted !== true &&
91
91
  Math.abs(rect.width - lastRect.width) <= 32 &&
92
- Math.abs(rect.height - lastRect.height) <= 32)
92
+ Math.abs(rect.height - lastRect.height) <= 32) {
93
93
  return true;
94
+ }
94
95
  // Hold the new rect
95
96
  state.rect = rect;
96
97
  return false;
package/lib/cjs/SearchBar.d.ts CHANGED
@@ -3,6 +3,10 @@ import React from "react";
3
3
  * Search bar props
4
4
  */
5
5
  export interface SearchBarProps {
6
+ /**
7
+ * Auto submit delay miliseconds, default is 100ms
8
+ */
9
+ autoSubmitDelay?: number;
6
10
  /**
7
11
  * Style class name
8
12
  */
package/lib/cjs/SearchBar.js CHANGED
@@ -80,7 +80,7 @@ function checkFormEvent(event) {
80
80
  */
81
81
  function SearchBar(props) {
82
82
  // Destruct
83
- const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
83
+ const { autoSubmitDelay = 100, className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
84
84
  // Labels
85
85
  const labels = Labels_1.Labels.CommonPage;
86
86
  // Menu index
@@ -93,8 +93,9 @@ function SearchBar(props) {
93
93
  const { dimensions } = (0, react_2.useDimensions)(1, (target, rect) => {
94
94
  // Same logic from resetButtonRefe);
95
95
  if (rect.width === state.lastMaxWidth ||
96
- (!state.hasMore && rect.width > state.lastMaxWidth))
96
+ (!state.hasMore && rect.width > state.lastMaxWidth)) {
97
97
  return false;
98
+ }
98
99
  // Len
99
100
  const len = target.children.length;
100
101
  for (let i = 0; i < len; i++) {
@@ -238,11 +239,13 @@ function SearchBar(props) {
238
239
  };
239
240
  react_1.default.useEffect(() => {
240
241
  // Delayed way
241
- delayed.call(100);
242
+ if (autoSubmitDelay > 0) {
243
+ delayed.call(autoSubmitDelay);
244
+ }
242
245
  return () => {
243
246
  delayed.clear();
244
247
  };
245
- }, [className]);
248
+ }, [autoSubmitDelay]);
246
249
  // Layout
247
250
  return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
248
251
  if (form)
package/lib/mjs/ResponsibleContainer.js CHANGED
@@ -83,8 +83,9 @@ export function ResponsibleContainer(props) {
83
83
  if (lastRect != null &&
84
84
  state.mounted !== true &&
85
85
  Math.abs(rect.width - lastRect.width) <= 32 &&
86
- Math.abs(rect.height - lastRect.height) <= 32)
86
+ Math.abs(rect.height - lastRect.height) <= 32) {
87
87
  return true;
88
+ }
88
89
  // Hold the new rect
89
90
  state.rect = rect;
90
91
  return false;
package/lib/mjs/SearchBar.d.ts CHANGED
@@ -3,6 +3,10 @@ import React from "react";
3
3
  * Search bar props
4
4
  */
5
5
  export interface SearchBarProps {
6
+ /**
7
+ * Auto submit delay miliseconds, default is 100ms
8
+ */
9
+ autoSubmitDelay?: number;
6
10
  /**
7
11
  * Style class name
8
12
  */
package/lib/mjs/SearchBar.js CHANGED
@@ -74,7 +74,7 @@ function checkFormEvent(event) {
74
74
  */
75
75
  export function SearchBar(props) {
76
76
  // Destruct
77
- const { className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
77
+ const { autoSubmitDelay = 100, className, fields, onSubmit, itemGap = 6, itemWidth = 160, top, width } = props;
78
78
  // Labels
79
79
  const labels = Labels.CommonPage;
80
80
  // Menu index
@@ -87,8 +87,9 @@ export function SearchBar(props) {
87
87
  const { dimensions } = useDimensions(1, (target, rect) => {
88
88
  // Same logic from resetButtonRefe);
89
89
  if (rect.width === state.lastMaxWidth ||
90
- (!state.hasMore && rect.width > state.lastMaxWidth))
90
+ (!state.hasMore && rect.width > state.lastMaxWidth)) {
91
91
  return false;
92
+ }
92
93
  // Len
93
94
  const len = target.children.length;
94
95
  for (let i = 0; i < len; i++) {
@@ -232,11 +233,13 @@ export function SearchBar(props) {
232
233
  };
233
234
  React.useEffect(() => {
234
235
  // Delayed way
235
- delayed.call(100);
236
+ if (autoSubmitDelay > 0) {
237
+ delayed.call(autoSubmitDelay);
238
+ }
236
239
  return () => {
237
240
  delayed.clear();
238
241
  };
239
- }, [className]);
242
+ }, [autoSubmitDelay]);
240
243
  // Layout
241
244
  return (_jsxs(React.Fragment, { children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
242
245
  if (form)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.6.24",
3
+ "version": "1.6.25",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -41,7 +41,7 @@
41
41
  "@emotion/styled": "^11.14.1",
42
42
  "@etsoo/appscript": "^1.6.56",
43
43
  "@etsoo/notificationbase": "^1.1.66",
44
- "@etsoo/react": "^1.8.79",
44
+ "@etsoo/react": "^1.8.80",
45
45
  "@etsoo/shared": "^1.2.80",
46
46
  "@mui/icons-material": "^7.3.9",
47
47
  "@mui/material": "^7.3.9",
package/src/ResponsibleContainer.tsx CHANGED
@@ -275,8 +275,9 @@ export function ResponsibleContainer<T extends object, F>(
275
275
  state.mounted !== true &&
276
276
  Math.abs(rect.width - lastRect.width) <= 32 &&
277
277
  Math.abs(rect.height - lastRect.height) <= 32
278
- )
278
+ ) {
279
279
  return true;
280
+ }
280
281
 
281
282
  // Hold the new rect
282
283
  state.rect = rect;
package/src/SearchBar.tsx CHANGED
@@ -13,6 +13,11 @@ import Toolbar from "@mui/material/Toolbar";
13
13
  * Search bar props
14
14
  */
15
15
  export interface SearchBarProps {
16
+ /**
17
+ * Auto submit delay miliseconds, default is 100ms
18
+ */
19
+ autoSubmitDelay?: number;
20
+
16
21
  /**
17
22
  * Style class name
18
23
  */
@@ -123,6 +128,7 @@ function checkFormEvent(event: React.FormEvent<HTMLFormElement>) {
123
128
  export function SearchBar(props: SearchBarProps) {
124
129
  // Destruct
125
130
  const {
131
+ autoSubmitDelay = 100,
126
132
  className,
127
133
  fields,
128
134
  onSubmit,
@@ -157,8 +163,9 @@ export function SearchBar(props: SearchBarProps) {
157
163
  if (
158
164
  rect.width === state.lastMaxWidth ||
159
165
  (!state.hasMore && rect.width > state.lastMaxWidth)
160
- )
166
+ ) {
161
167
  return false;
168
+ }
162
169
 
163
170
  // Len
164
171
  const len = target.children.length;
@@ -331,12 +338,14 @@ export function SearchBar(props: SearchBarProps) {
331
338
 
332
339
  React.useEffect(() => {
333
340
  // Delayed way
334
- delayed.call(100);
341
+ if (autoSubmitDelay > 0) {
342
+ delayed.call(autoSubmitDelay);
343
+ }
335
344
 
336
345
  return () => {
337
346
  delayed.clear();
338
347
  };
339
- }, [className]);
348
+ }, [autoSubmitDelay]);
340
349
 
341
350
  // Layout
342
351
  return (