@etsoo/materialui 1.3.74 → 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 (3) hide show
  1. package/lib/CountdownButton.js +34 -31
  2. package/package.json +1 -1
  3. package/src/CountdownButton.tsx +35 -32
package/lib/CountdownButton.js CHANGED
@@ -13,43 +13,26 @@ export const CountdownButton = React.forwardRef((props, ref) => {
13
13
  // 0 - normal
14
14
  // 1 - loading
15
15
  // >= 2 - countdown seconds
16
- const [state, updateState] = React.useState(initState);
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.3.74",
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",
package/src/CountdownButton.tsx CHANGED
@@ -39,49 +39,31 @@ export const CountdownButton = React.forwardRef<
39
39
  // 0 - normal
40
40
  // 1 - loading
41
41
  // >= 2 - countdown seconds
42
- const [state, updateState] = React.useState(initState);
42
+ const [state, updateState] = React.useState(0);
43
43
 
44
44
  // Ignore seconds
45
- const seconds = 2;
45
+ const ignoreSeconds = 2;
46
46
 
47
- // Countdown length
48
- const [shared] = React.useState({ maxLength: 0 });
47
+ // Refs
48
+ const refs = React.useRef({ isMounted: false, maxLength: 0 });
49
49
 
50
- const isMounted = React.useRef(true);
51
-
52
- // endIcon
53
- let endIcon: React.ReactNode;
54
- if (state === 0) {
55
- endIcon = undefined;
56
- } else if (state === 1) {
57
- endIcon = <CircularProgress size={12} />;
58
- } else {
59
- const countdown = (state - seconds)
60
- .toString()
61
- .padStart(shared.maxLength, "0");
62
- endIcon = <span style={{ fontSize: "smaller" }}>{countdown}</span>;
63
- }
64
-
65
- // Disabled?
66
- const disabled = state > 0;
67
-
68
- // Action
69
- const doAction = (result: number) => {
50
+ // Set state
51
+ const setState = React.useCallback((result: number) => {
70
52
  // Seconds to wait, 120
71
- if (result > seconds) {
53
+ if (result > ignoreSeconds) {
72
54
  // Here 122
73
- result += seconds;
55
+ result += ignoreSeconds;
74
56
  updateState(result);
75
57
 
76
58
  // Update max length
77
- shared.maxLength = result.toString().length;
59
+ refs.current.maxLength = result.toString().length;
78
60
 
79
61
  const seed = setInterval(() => {
80
62
  // Mounted?
81
- if (!isMounted.current) return;
63
+ if (!refs.current.isMounted) return;
82
64
 
83
65
  // Last 1 second and then complete
84
- if (result > seconds + 1) {
66
+ if (result > ignoreSeconds + 1) {
85
67
  result--;
86
68
  updateState(result);
87
69
  } else {
@@ -92,7 +74,23 @@ export const CountdownButton = React.forwardRef<
92
74
  } else {
93
75
  updateState(0);
94
76
  }
95
- };
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;
96
94
 
97
95
  // Local click
98
96
  const localClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -103,15 +101,20 @@ export const CountdownButton = React.forwardRef<
103
101
  if (onClick != null) onClick(event);
104
102
 
105
103
  // Return any countdown
106
- onAction().then(doAction);
104
+ onAction().then(setState);
107
105
  };
108
106
 
109
107
  React.useEffect(() => {
108
+ refs.current.isMounted = true;
110
109
  return () => {
111
- isMounted.current = false;
110
+ refs.current.isMounted = false;
112
111
  };
113
112
  }, []);
114
113
 
114
+ React.useEffect(() => {
115
+ setState(initState);
116
+ }, [initState]);
117
+
115
118
  return (
116
119
  <Button
117
120
  disabled={disabled}