@etsoo/react 1.4.88 → 1.4.89

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/mu/LoadingButton.js +11 -9
  2. package/package.json +11 -11
  3. package/src/mu/LoadingButton.tsx +15 -7
package/lib/mu/LoadingButton.js CHANGED
@@ -15,6 +15,8 @@ export function LoadingButton(props) {
15
15
  const [loading, setLoading] = React.useState(false);
16
16
  // Icon
17
17
  const localEndIcon = loading ? (React.createElement(CircularProgress, { ...loadingIconProps })) : (endIcon);
18
+ // Button ref
19
+ const buttonRef = React.createRef();
18
20
  // Check if the component is mounted
19
21
  const isMounted = React.useRef(true);
20
22
  React.useEffect(() => {
@@ -23,23 +25,23 @@ export function LoadingButton(props) {
23
25
  };
24
26
  }, []);
25
27
  // Layout
26
- return (React.createElement(Button, { disabled: loading, endIcon: localEndIcon, onClick: async (event) => {
28
+ return (React.createElement(Button, { disabled: loading, ref: buttonRef, endIcon: localEndIcon, onClick: async (event) => {
27
29
  if (onClick) {
30
+ // Disable the button
31
+ buttonRef.current.disabled = true;
28
32
  // Update state
29
33
  setLoading(true);
34
+ // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
30
35
  // const AsyncFunction = (async () => {}).constructor;
31
36
  // onClick instanceof AsyncFunction
32
- if (onClick.constructor.name === 'AsyncFunction') {
33
- // May long time running
34
- await onClick(event);
35
- }
36
- else {
37
- onClick(event);
38
- }
37
+ await onClick(event);
39
38
  // Warning: Can't perform a React state update on an unmounted component
40
39
  // It's necessary to check the component is mounted now
41
- if (isMounted.current)
40
+ if (isMounted.current) {
42
41
  setLoading(false);
42
+ // Enable the button
43
+ buttonRef.current.disabled = false;
44
+ }
43
45
  }
44
46
  }, ...rest }));
45
47
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.88",
3
+ "version": "1.4.89",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,16 +50,16 @@
50
50
  "@emotion/react": "^11.7.1",
51
51
  "@emotion/style": "^0.8.0",
52
52
  "@emotion/styled": "^11.6.0",
53
- "@etsoo/appscript": "^1.2.35",
53
+ "@etsoo/appscript": "^1.2.37",
54
54
  "@etsoo/notificationbase": "^1.1.1",
55
- "@etsoo/shared": "^1.1.9",
55
+ "@etsoo/shared": "^1.1.10",
56
56
  "@mui/icons-material": "^5.3.1",
57
57
  "@mui/material": "^5.4.0",
58
58
  "@reach/router": "^1.3.4",
59
- "@types/pica": "^5.1.3",
59
+ "@types/pica": "^9.0.0",
60
60
  "@types/pulltorefreshjs": "^0.1.5",
61
61
  "@types/reach__router": "^1.3.10",
62
- "@types/react": "^17.0.38",
62
+ "@types/react": "^17.0.39",
63
63
  "@types/react-avatar-editor": "^10.3.6",
64
64
  "@types/react-beautiful-dnd": "^13.1.2",
65
65
  "@types/react-dom": "^17.0.11",
@@ -72,15 +72,15 @@
72
72
  "react-beautiful-dnd": "^13.1.0",
73
73
  "react-dom": "^17.0.2",
74
74
  "react-draggable": "^4.4.4",
75
- "react-imask": "^6.3.0",
75
+ "react-imask": "^6.4.0",
76
76
  "react-window": "^1.8.6"
77
77
  },
78
78
  "devDependencies": {
79
- "@babel/cli": "^7.16.8",
80
- "@babel/core": "^7.16.12",
81
- "@babel/plugin-transform-runtime": "^7.16.10",
79
+ "@babel/cli": "^7.17.0",
80
+ "@babel/core": "^7.17.0",
81
+ "@babel/plugin-transform-runtime": "^7.17.0",
82
82
  "@babel/preset-env": "^7.16.11",
83
- "@babel/runtime-corejs3": "^7.16.8",
83
+ "@babel/runtime-corejs3": "^7.17.0",
84
84
  "@types/jest": "^27.4.0",
85
85
  "@types/react-test-renderer": "^17.0.1",
86
86
  "@typescript-eslint/eslint-plugin": "^5.10.2",
@@ -89,7 +89,7 @@
89
89
  "eslint-config-airbnb-base": "^15.0.0",
90
90
  "eslint-plugin-import": "^2.25.4",
91
91
  "eslint-plugin-react": "^7.28.0",
92
- "jest": "^27.4.7",
92
+ "jest": "^27.5.0",
93
93
  "react-test-renderer": "^17.0.2",
94
94
  "ts-jest": "^27.1.3",
95
95
  "typescript": "^4.5.5"
package/src/mu/LoadingButton.tsx CHANGED
@@ -38,6 +38,9 @@ export function LoadingButton(props: LoadingButtonProps) {
38
38
  endIcon
39
39
  );
40
40
 
41
+ // Button ref
42
+ const buttonRef = React.createRef<HTMLButtonElement>();
43
+
41
44
  // Check if the component is mounted
42
45
  const isMounted = React.useRef(true);
43
46
 
@@ -51,24 +54,29 @@ export function LoadingButton(props: LoadingButtonProps) {
51
54
  return (
52
55
  <Button
53
56
  disabled={loading}
57
+ ref={buttonRef}
54
58
  endIcon={localEndIcon}
55
59
  onClick={async (event) => {
56
60
  if (onClick) {
61
+ // Disable the button
62
+ buttonRef.current!.disabled = true;
63
+
57
64
  // Update state
58
65
  setLoading(true);
59
66
 
67
+ // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
60
68
  // const AsyncFunction = (async () => {}).constructor;
61
69
  // onClick instanceof AsyncFunction
62
- if (onClick.constructor.name === 'AsyncFunction') {
63
- // May long time running
64
- await onClick(event);
65
- } else {
66
- onClick(event);
67
- }
70
+ await onClick(event);
68
71
 
69
72
  // Warning: Can't perform a React state update on an unmounted component
70
73
  // It's necessary to check the component is mounted now
71
- if (isMounted.current) setLoading(false);
74
+ if (isMounted.current) {
75
+ setLoading(false);
76
+
77
+ // Enable the button
78
+ buttonRef.current!.disabled = false;
79
+ }
72
80
  }
73
81
  }}
74
82
  {...rest}