@etsoo/materialui 1.3.73 → 1.3.75

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 (11) hide show
  1. package/lib/CountdownButton.d.ts +7 -3
  2. package/lib/CountdownButton.js +37 -34
  3. package/lib/InputField.d.ts +9 -9
  4. package/lib/MUGlobal.d.ts +0 -1
  5. package/lib/NotifierPromptProps.d.ts +0 -1
  6. package/lib/TextFieldEx.d.ts +18 -18
  7. package/lib/app/ReactApp.d.ts +1 -1
  8. package/lib/pages/DrawerHeader.d.ts +0 -1
  9. package/lib/pages/SearchPageProps.d.ts +0 -1
  10. package/package.json +17 -17
  11. package/src/CountdownButton.tsx +104 -96
package/lib/CountdownButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { ButtonProps } from '@mui/material';
2
- import React from 'react';
1
+ import { ButtonProps } from "@mui/material";
2
+ import React from "react";
3
3
  /**
4
4
  * Countdown button action
5
5
  */
@@ -9,7 +9,11 @@ export interface CountdownButtonAction {
9
9
  /**
10
10
  * Countdown button props
11
11
  */
12
- export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
12
+ export type CountdownButtonProps = Omit<ButtonProps, "endIcon" | "disabled"> & {
13
+ /**
14
+ * Initial state, default 0
15
+ */
16
+ initState?: number;
13
17
  /**
14
18
  * Action, required
15
19
  */
package/lib/CountdownButton.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Button, CircularProgress } from '@mui/material';
3
- import React from 'react';
2
+ import { Button, CircularProgress } from "@mui/material";
3
+ import React from "react";
4
4
  /**
5
5
  * Countdown button
6
6
  * @param props Props
@@ -8,48 +8,31 @@ import React from 'react';
8
8
  */
9
9
  export const CountdownButton = React.forwardRef((props, ref) => {
10
10
  // Destructure
11
- const { onAction, onClick, ...rest } = props;
11
+ const { initState = 0, onAction, onClick, ...rest } = props;
12
12
  // State
13
13
  // 0 - normal
14
14
  // 1 - loading
15
- // 2 - countdown
15
+ // >= 2 - countdown seconds
16
16
  const [state, updateState] = React.useState(0);
17
17
  // Ignore seconds
18
- const seconds = 2;
19
- // Countdown length
20
- const [shared] = React.useState({ maxLength: 0 });
21
- const isMounted = React.useRef(true);
22
- // endIcon
23
- let endIcon;
24
- if (state === 0) {
25
- endIcon = undefined;
26
- }
27
- else if (state === 1) {
28
- endIcon = _jsx(CircularProgress, { size: 12 });
29
- }
30
- else {
31
- const countdown = (state - seconds)
32
- .toString()
33
- .padStart(shared.maxLength, '0');
34
- endIcon = _jsx("span", { style: { fontSize: 'smaller' }, children: countdown });
35
- }
36
- // Disabled?
37
- const disabled = state > 0;
38
- // Action
39
- const doAction = (result) => {
18
+ const ignoreSeconds = 2;
19
+ // Refs
20
+ const refs = React.useRef({ isMounted: false, maxLength: 0 });
21
+ // Set state
22
+ const setState = React.useCallback((result) => {
40
23
  // Seconds to wait, 120
41
- if (result > seconds) {
24
+ if (result > ignoreSeconds) {
42
25
  // Here 122
43
- result += seconds;
26
+ result += ignoreSeconds;
44
27
  updateState(result);
45
28
  // Update max length
46
- shared.maxLength = result.toString().length;
29
+ refs.current.maxLength = result.toString().length;
47
30
  const seed = setInterval(() => {
48
31
  // Mounted?
49
- if (!isMounted.current)
32
+ if (!refs.current.isMounted)
50
33
  return;
51
34
  // Last 1 second and then complete
52
- if (result > seconds + 1) {
35
+ if (result > ignoreSeconds + 1) {
53
36
  result--;
54
37
  updateState(result);
55
38
  }
@@ -62,7 +45,23 @@ export const CountdownButton = React.forwardRef((props, ref) => {
62
45
  else {
63
46
  updateState(0);
64
47
  }
65
- };
48
+ }, []);
49
+ // endIcon
50
+ let endIcon;
51
+ if (state === 0) {
52
+ endIcon = undefined;
53
+ }
54
+ else if (state === 1) {
55
+ endIcon = _jsx(CircularProgress, { size: 12 });
56
+ }
57
+ else {
58
+ const countdown = (state - ignoreSeconds)
59
+ .toString()
60
+ .padStart(refs.current.maxLength, "0");
61
+ endIcon = _jsx("span", { style: { fontSize: "smaller" }, children: countdown });
62
+ }
63
+ // Disabled?
64
+ const disabled = state > 0;
66
65
  // Local click
67
66
  const localClick = (event) => {
68
67
  // Show loading
@@ -71,12 +70,16 @@ export const CountdownButton = React.forwardRef((props, ref) => {
71
70
  if (onClick != null)
72
71
  onClick(event);
73
72
  // Return any countdown
74
- onAction().then(doAction);
73
+ onAction().then(setState);
75
74
  };
76
75
  React.useEffect(() => {
76
+ refs.current.isMounted = true;
77
77
  return () => {
78
- isMounted.current = false;
78
+ refs.current.isMounted = false;
79
79
  };
80
80
  }, []);
81
+ React.useEffect(() => {
82
+ setState(initState);
83
+ }, [initState]);
81
84
  return (_jsx(Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
82
85
  });
package/lib/InputField.d.ts CHANGED
@@ -26,39 +26,39 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
26
26
  /**
27
27
  * Change delay (ms) to avoid repeatly dispatch onChange
28
28
  */
29
- changeDelay?: number | undefined;
29
+ changeDelay?: number;
30
30
  /**
31
31
  * Change delay handler, without it onChange will be applied
32
32
  */
33
- onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
33
+ onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
34
34
  /**
35
35
  * Is the field read only?
36
36
  */
37
- readOnly?: boolean | undefined;
37
+ readOnly?: boolean;
38
38
  }, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
39
39
  /**
40
40
  * Change delay (ms) to avoid repeatly dispatch onChange
41
41
  */
42
- changeDelay?: number | undefined;
42
+ changeDelay?: number;
43
43
  /**
44
44
  * Change delay handler, without it onChange will be applied
45
45
  */
46
- onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
46
+ onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
47
47
  /**
48
48
  * Is the field read only?
49
49
  */
50
- readOnly?: boolean | undefined;
50
+ readOnly?: boolean;
51
51
  }, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
52
52
  /**
53
53
  * Change delay (ms) to avoid repeatly dispatch onChange
54
54
  */
55
- changeDelay?: number | undefined;
55
+ changeDelay?: number;
56
56
  /**
57
57
  * Change delay handler, without it onChange will be applied
58
58
  */
59
- onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
59
+ onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
60
60
  /**
61
61
  * Is the field read only?
62
62
  */
63
- readOnly?: boolean | undefined;
63
+ readOnly?: boolean;
64
64
  }, "ref">) & React.RefAttributes<HTMLDivElement>>;
package/lib/MUGlobal.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ListItemButtonProps, Theme } from '@mui/material';
3
2
  /**
4
3
  * Mouse event handler with data
package/lib/NotifierPromptProps.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  /**
3
2
  * Notifier prompt props
4
3
  */
package/lib/TextFieldEx.d.ts CHANGED
@@ -45,81 +45,81 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("
45
45
  /**
46
46
  * Change delay (ms) to avoid repeatly dispatch onChange
47
47
  */
48
- changeDelay?: number | undefined;
48
+ changeDelay?: number;
49
49
  /**
50
50
  * On enter click
51
51
  */
52
- onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
52
+ onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
53
53
  /**
54
54
  * On visibility
55
55
  * @param input HTML input
56
56
  * @returns Result
57
57
  */
58
- onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
58
+ onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
59
59
  /**
60
60
  * Is the field read only?
61
61
  */
62
- readOnly?: boolean | undefined;
62
+ readOnly?: boolean;
63
63
  /**
64
64
  * Show clear button
65
65
  */
66
- showClear?: boolean | undefined;
66
+ showClear?: boolean;
67
67
  /**
68
68
  * Show password button
69
69
  */
70
- showPassword?: boolean | undefined;
70
+ showPassword?: boolean;
71
71
  }, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
72
72
  /**
73
73
  * Change delay (ms) to avoid repeatly dispatch onChange
74
74
  */
75
- changeDelay?: number | undefined;
75
+ changeDelay?: number;
76
76
  /**
77
77
  * On enter click
78
78
  */
79
- onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
79
+ onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
80
80
  /**
81
81
  * On visibility
82
82
  * @param input HTML input
83
83
  * @returns Result
84
84
  */
85
- onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
85
+ onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
86
86
  /**
87
87
  * Is the field read only?
88
88
  */
89
- readOnly?: boolean | undefined;
89
+ readOnly?: boolean;
90
90
  /**
91
91
  * Show clear button
92
92
  */
93
- showClear?: boolean | undefined;
93
+ showClear?: boolean;
94
94
  /**
95
95
  * Show password button
96
96
  */
97
- showPassword?: boolean | undefined;
97
+ showPassword?: boolean;
98
98
  }, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
99
99
  /**
100
100
  * Change delay (ms) to avoid repeatly dispatch onChange
101
101
  */
102
- changeDelay?: number | undefined;
102
+ changeDelay?: number;
103
103
  /**
104
104
  * On enter click
105
105
  */
106
- onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
106
+ onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
107
107
  /**
108
108
  * On visibility
109
109
  * @param input HTML input
110
110
  * @returns Result
111
111
  */
112
- onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
112
+ onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
113
113
  /**
114
114
  * Is the field read only?
115
115
  */
116
- readOnly?: boolean | undefined;
116
+ readOnly?: boolean;
117
117
  /**
118
118
  * Show clear button
119
119
  */
120
- showClear?: boolean | undefined;
120
+ showClear?: boolean;
121
121
  /**
122
122
  * Show password button
123
123
  */
124
- showPassword?: boolean | undefined;
124
+ showPassword?: boolean;
125
125
  }, "ref">) & React.RefAttributes<TextFieldExMethods>>;
package/lib/app/ReactApp.d.ts CHANGED
@@ -22,7 +22,7 @@ export declare let globalApp: ReactAppType | null;
22
22
  * @returns Component
23
23
  */
24
24
  export declare function ReactAppStateDetector(props: IStateProps): React.FunctionComponentElement<{
25
- children?: React.ReactNode;
25
+ children?: React.ReactNode | undefined;
26
26
  }>;
27
27
  /**
28
28
  * React implemented base
package/lib/pages/DrawerHeader.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  /**
3
2
  * Common drawer header
4
3
  */
package/lib/pages/SearchPageProps.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import type { GridJsonData, GridLoader } from "@etsoo/react";
3
2
  import type { DataTypes } from "@etsoo/shared";
4
3
  import type { CommonPageProps } from "./CommonPage";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.3.73",
3
+ "version": "1.3.75",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -47,16 +47,16 @@
47
47
  "dependencies": {
48
48
  "@dnd-kit/core": "^6.1.0",
49
49
  "@dnd-kit/sortable": "^8.0.0",
50
- "@emotion/css": "^11.11.2",
51
- "@emotion/react": "^11.11.4",
52
- "@emotion/styled": "^11.11.5",
50
+ "@emotion/css": "^11.13.0",
51
+ "@emotion/react": "^11.13.0",
52
+ "@emotion/styled": "^11.13.0",
53
53
  "@etsoo/appscript": "^1.4.99",
54
- "@etsoo/notificationbase": "^1.1.43",
54
+ "@etsoo/notificationbase": "^1.1.44",
55
55
  "@etsoo/react": "^1.7.57",
56
- "@etsoo/shared": "^1.2.42",
57
- "@mui/icons-material": "^5.15.19",
58
- "@mui/material": "^5.15.19",
59
- "@mui/x-data-grid": "^7.6.2",
56
+ "@etsoo/shared": "^1.2.43",
57
+ "@mui/icons-material": "^5.16.5",
58
+ "@mui/material": "^5.16.5",
59
+ "@mui/x-data-grid": "^7.11.1",
60
60
  "chart.js": "^4.4.3",
61
61
  "chartjs-plugin-datalabels": "^2.2.0",
62
62
  "eventemitter3": "^5.0.1",
@@ -70,14 +70,14 @@
70
70
  "react-imask": "7.6.1"
71
71
  },
72
72
  "devDependencies": {
73
- "@babel/cli": "^7.24.7",
74
- "@babel/core": "^7.24.7",
73
+ "@babel/cli": "^7.24.8",
74
+ "@babel/core": "^7.24.9",
75
75
  "@babel/plugin-transform-runtime": "^7.24.7",
76
- "@babel/preset-env": "^7.24.7",
76
+ "@babel/preset-env": "^7.25.0",
77
77
  "@babel/preset-react": "^7.24.7",
78
78
  "@babel/preset-typescript": "^7.24.7",
79
- "@babel/runtime-corejs3": "^7.24.7",
80
- "@testing-library/jest-dom": "^6.4.6",
79
+ "@babel/runtime-corejs3": "^7.25.0",
80
+ "@testing-library/jest-dom": "^6.4.8",
81
81
  "@testing-library/react": "^16.0.0",
82
82
  "@types/jest": "^29.5.12",
83
83
  "@types/pica": "^9.0.4",
@@ -87,10 +87,10 @@
87
87
  "@types/react-dom": "^18.3.0",
88
88
  "@types/react-input-mask": "^3.0.5",
89
89
  "@types/react-window": "^1.8.8",
90
- "@typescript-eslint/eslint-plugin": "^7.13.0",
91
- "@typescript-eslint/parser": "^7.13.0",
90
+ "@typescript-eslint/eslint-plugin": "^7.17.0",
91
+ "@typescript-eslint/parser": "^7.17.0",
92
92
  "jest": "^29.7.0",
93
93
  "jest-environment-jsdom": "^29.7.0",
94
- "typescript": "^5.4.5"
94
+ "typescript": "^5.5.4"
95
95
  }
96
96
  }
package/src/CountdownButton.tsx CHANGED
@@ -1,21 +1,26 @@
1
- import { Button, ButtonProps, CircularProgress } from '@mui/material';
2
- import React from 'react';
1
+ import { Button, ButtonProps, CircularProgress } from "@mui/material";
2
+ import React from "react";
3
3
 
4
4
  /**
5
5
  * Countdown button action
6
6
  */
7
7
  export interface CountdownButtonAction {
8
- (): Promise<number>;
8
+ (): Promise<number>;
9
9
  }
10
10
 
11
11
  /**
12
12
  * Countdown button props
13
13
  */
14
- export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
15
- /**
16
- * Action, required
17
- */
18
- onAction: CountdownButtonAction;
14
+ export type CountdownButtonProps = Omit<ButtonProps, "endIcon" | "disabled"> & {
15
+ /**
16
+ * Initial state, default 0
17
+ */
18
+ initState?: number;
19
+
20
+ /**
21
+ * Action, required
22
+ */
23
+ onAction: CountdownButtonAction;
19
24
  };
20
25
 
21
26
  /**
@@ -24,96 +29,99 @@ export type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabled'> & {
24
29
  * @returns Button
25
30
  */
26
31
  export const CountdownButton = React.forwardRef<
27
- HTMLButtonElement,
28
- CountdownButtonProps
32
+ HTMLButtonElement,
33
+ CountdownButtonProps
29
34
  >((props, ref) => {
30
- // Destructure
31
- const { onAction, onClick, ...rest } = props;
32
-
33
- // State
34
- // 0 - normal
35
- // 1 - loading
36
- // 2 - countdown
37
- const [state, updateState] = React.useState(0);
38
-
39
- // Ignore seconds
40
- const seconds = 2;
41
-
42
- // Countdown length
43
- const [shared] = React.useState({ maxLength: 0 });
44
-
45
- const isMounted = React.useRef(true);
46
-
47
- // endIcon
48
- let endIcon: React.ReactNode;
49
- if (state === 0) {
50
- endIcon = undefined;
51
- } else if (state === 1) {
52
- endIcon = <CircularProgress size={12} />;
53
- } else {
54
- const countdown = (state - seconds)
55
- .toString()
56
- .padStart(shared.maxLength, '0');
57
- endIcon = <span style={{ fontSize: 'smaller' }}>{countdown}</span>;
58
- }
59
-
60
- // Disabled?
61
- const disabled = state > 0;
62
-
63
- // Action
64
- const doAction = (result: number) => {
65
- // Seconds to wait, 120
66
- if (result > seconds) {
67
- // Here 122
68
- result += seconds;
69
- updateState(result);
70
-
71
- // Update max length
72
- shared.maxLength = result.toString().length;
73
-
74
- const seed = setInterval(() => {
75
- // Mounted?
76
- if (!isMounted.current) return;
77
-
78
- // Last 1 second and then complete
79
- if (result > seconds + 1) {
80
- result--;
81
- updateState(result);
82
- } else {
83
- clearInterval(seed);
84
- updateState(0);
85
- }
86
- }, 1000);
35
+ // Destructure
36
+ const { initState = 0, onAction, onClick, ...rest } = props;
37
+
38
+ // State
39
+ // 0 - normal
40
+ // 1 - loading
41
+ // >= 2 - countdown seconds
42
+ const [state, updateState] = React.useState(0);
43
+
44
+ // Ignore seconds
45
+ const ignoreSeconds = 2;
46
+
47
+ // Refs
48
+ const refs = React.useRef({ isMounted: false, maxLength: 0 });
49
+
50
+ // Set state
51
+ const setState = React.useCallback((result: number) => {
52
+ // Seconds to wait, 120
53
+ if (result > ignoreSeconds) {
54
+ // Here 122
55
+ result += ignoreSeconds;
56
+ updateState(result);
57
+
58
+ // Update max length
59
+ refs.current.maxLength = result.toString().length;
60
+
61
+ const seed = setInterval(() => {
62
+ // Mounted?
63
+ if (!refs.current.isMounted) return;
64
+
65
+ // Last 1 second and then complete
66
+ if (result > ignoreSeconds + 1) {
67
+ result--;
68
+ updateState(result);
87
69
  } else {
88
- updateState(0);
70
+ clearInterval(seed);
71
+ updateState(0);
89
72
  }
73
+ }, 1000);
74
+ } else {
75
+ updateState(0);
76
+ }
77
+ }, []);
78
+
79
+ // endIcon
80
+ let endIcon: React.ReactNode;
81
+ if (state === 0) {
82
+ endIcon = undefined;
83
+ } else if (state === 1) {
84
+ endIcon = <CircularProgress size={12} />;
85
+ } else {
86
+ const countdown = (state - ignoreSeconds)
87
+ .toString()
88
+ .padStart(refs.current.maxLength, "0");
89
+ endIcon = <span style={{ fontSize: "smaller" }}>{countdown}</span>;
90
+ }
91
+
92
+ // Disabled?
93
+ const disabled = state > 0;
94
+
95
+ // Local click
96
+ const localClick = (event: React.MouseEvent<HTMLButtonElement>) => {
97
+ // Show loading
98
+ updateState(1);
99
+
100
+ // Callback
101
+ if (onClick != null) onClick(event);
102
+
103
+ // Return any countdown
104
+ onAction().then(setState);
105
+ };
106
+
107
+ React.useEffect(() => {
108
+ refs.current.isMounted = true;
109
+ return () => {
110
+ refs.current.isMounted = false;
90
111
  };
91
-
92
- // Local click
93
- const localClick = (event: React.MouseEvent<HTMLButtonElement>) => {
94
- // Show loading
95
- updateState(1);
96
-
97
- // Callback
98
- if (onClick != null) onClick(event);
99
-
100
- // Return any countdown
101
- onAction().then(doAction);
102
- };
103
-
104
- React.useEffect(() => {
105
- return () => {
106
- isMounted.current = false;
107
- };
108
- }, []);
109
-
110
- return (
111
- <Button
112
- disabled={disabled}
113
- endIcon={endIcon}
114
- onClick={localClick}
115
- ref={ref}
116
- {...rest}
117
- />
118
- );
112
+ }, []);
113
+
114
+ React.useEffect(() => {
115
+ setState(initState);
116
+ }, [initState]);
117
+
118
+ return (
119
+ <Button
120
+ disabled={disabled}
121
+ endIcon={endIcon}
122
+ onClick={localClick}
123
+ ref={ref}
124
+ {...rest}
125
+ />
126
+ );
119
127
  });