@etsoo/react 1.2.46 → 1.2.50

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/ProgressCount.js +19 -9
  2. package/package.json +3 -3
  3. package/src/mu/ProgressCount.tsx +24 -12
package/lib/mu/ProgressCount.js CHANGED
@@ -10,32 +10,42 @@ export function ProgressCount(props) {
10
10
  const { countdown = true, linear = true, minWidth = 36, onComplete, onProgress, seconds, valueUnit = '' } = props;
11
11
  // Progress value
12
12
  const [value, setValue] = React.useState(countdown ? seconds : 0);
13
+ // Variant
14
+ const [variant, setVariant] = React.useState('determinate');
13
15
  // Progress value
14
- const progressValue = value / seconds;
16
+ const progressValue = (100.0 * value) / seconds;
15
17
  React.useEffect(() => {
16
18
  const timer = setInterval(() => {
17
19
  setValue((prev) => {
18
- let newValue = prev + (countdown ? -1 : 1);
20
+ const newValue = countdown
21
+ ? prev === 0
22
+ ? seconds
23
+ : prev - 1
24
+ : prev === seconds
25
+ ? 0
26
+ : prev + 1;
19
27
  if (countdown) {
20
28
  if (newValue === 0) {
21
29
  if (onComplete) {
22
30
  const result = onComplete();
23
31
  // Finish
24
- if (result === false)
32
+ if (result === false) {
25
33
  clearInterval(timer);
34
+ setVariant('indeterminate');
35
+ }
26
36
  }
27
- newValue = value;
28
37
  }
29
38
  }
30
39
  else {
31
- if (newValue === value) {
40
+ if (newValue === seconds) {
32
41
  if (onComplete) {
33
42
  const result = onComplete();
34
43
  // Finish
35
- if (result === false)
44
+ if (result === false) {
36
45
  clearInterval(timer);
46
+ setVariant('indeterminate');
47
+ }
37
48
  }
38
- newValue = 0;
39
49
  }
40
50
  }
41
51
  if (onProgress)
@@ -50,11 +60,11 @@ export function ProgressCount(props) {
50
60
  if (linear)
51
61
  return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', width: '100%' } },
52
62
  React.createElement(Box, { sx: { width: '100%', mr: 1 } },
53
- React.createElement(LinearProgress, { variant: "determinate", value: progressValue })),
63
+ React.createElement(LinearProgress, { variant: variant, value: progressValue })),
54
64
  React.createElement(Box, { sx: { minWidth } },
55
65
  React.createElement(Typography, { variant: "body2", color: "text.secondary" }, `${value}${valueUnit}`))));
56
66
  return (React.createElement(Box, { sx: { position: 'relative', display: 'inline-flex' } },
57
- React.createElement(CircularProgress, { variant: "determinate", value: progressValue }),
67
+ React.createElement(CircularProgress, { variant: variant, value: progressValue }),
58
68
  React.createElement(Box, { sx: {
59
69
  top: 0,
60
70
  left: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.2.46",
3
+ "version": "1.2.50",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
50
50
  "@emotion/react": "^11.5.0",
51
51
  "@emotion/style": "^0.8.0",
52
52
  "@emotion/styled": "^11.3.0",
53
- "@etsoo/appscript": "^1.1.16",
53
+ "@etsoo/appscript": "^1.1.17",
54
54
  "@etsoo/notificationbase": "^1.0.88",
55
- "@etsoo/shared": "^1.0.54",
55
+ "@etsoo/shared": "^1.0.55",
56
56
  "@mui/icons-material": "^5.0.4",
57
57
  "@mui/material": "^5.0.4",
58
58
  "@reach/router": "^1.3.4",
package/src/mu/ProgressCount.tsx CHANGED
@@ -70,31 +70,46 @@ export function ProgressCount(props: ProgressCountProps) {
70
70
  // Progress value
71
71
  const [value, setValue] = React.useState(countdown ? seconds : 0);
72
72
 
73
+ // Variant
74
+ const [variant, setVariant] = React.useState<
75
+ 'determinate' | 'indeterminate'
76
+ >('determinate');
77
+
73
78
  // Progress value
74
- const progressValue = value / seconds;
79
+ const progressValue = (100.0 * value) / seconds;
75
80
 
76
81
  React.useEffect(() => {
77
82
  const timer = setInterval(() => {
78
83
  setValue((prev) => {
79
- let newValue = prev + (countdown ? -1 : 1);
84
+ const newValue = countdown
85
+ ? prev === 0
86
+ ? seconds
87
+ : prev - 1
88
+ : prev === seconds
89
+ ? 0
90
+ : prev + 1;
80
91
 
81
92
  if (countdown) {
82
93
  if (newValue === 0) {
83
94
  if (onComplete) {
84
95
  const result = onComplete();
85
96
  // Finish
86
- if (result === false) clearInterval(timer);
97
+ if (result === false) {
98
+ clearInterval(timer);
99
+ setVariant('indeterminate');
100
+ }
87
101
  }
88
- newValue = value;
89
102
  }
90
103
  } else {
91
- if (newValue === value) {
104
+ if (newValue === seconds) {
92
105
  if (onComplete) {
93
106
  const result = onComplete();
94
107
  // Finish
95
- if (result === false) clearInterval(timer);
108
+ if (result === false) {
109
+ clearInterval(timer);
110
+ setVariant('indeterminate');
111
+ }
96
112
  }
97
- newValue = 0;
98
113
  }
99
114
  }
100
115
 
@@ -112,10 +127,7 @@ export function ProgressCount(props: ProgressCountProps) {
112
127
  return (
113
128
  <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
114
129
  <Box sx={{ width: '100%', mr: 1 }}>
115
- <LinearProgress
116
- variant="determinate"
117
- value={progressValue}
118
- />
130
+ <LinearProgress variant={variant} value={progressValue} />
119
131
  </Box>
120
132
  <Box sx={{ minWidth }}>
121
133
  <Typography
@@ -128,7 +140,7 @@ export function ProgressCount(props: ProgressCountProps) {
128
140
 
129
141
  return (
130
142
  <Box sx={{ position: 'relative', display: 'inline-flex' }}>
131
- <CircularProgress variant="determinate" value={progressValue} />
143
+ <CircularProgress variant={variant} value={progressValue} />
132
144
  <Box
133
145
  sx={{
134
146
  top: 0,