argous 1.2.243 → 1.2.244

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 (5) hide show
  1. package/dist/components/PercentageDisplay/PercentageDisplay.d.ts +11 -2
  2. package/dist/components/PercentageDisplay/PercentageDisplay.js +9 -4
  3. package/lib/components/PercentageDisplay/PercentageDisplay.d.ts +11 -2
  4. package/lib/components/PercentageDisplay/PercentageDisplay.js +16 -4
  5. package/package.json +1 -1
package/dist/components/PercentageDisplay/PercentageDisplay.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ import { TypographyVariant } from '@material-ui/core';
2
+
3
+
1
4
  export interface PercentageDisplayProps {
2
5
  /**
3
6
  * Identificação do elemento
@@ -6,7 +9,7 @@ export interface PercentageDisplayProps {
6
9
  /**
7
10
  * Porcentagem
8
11
  */
9
- percentage?: number|string,
12
+ percentage?: (number|string),
10
13
  /**
11
14
  * Tamanho do componente
12
15
  */
@@ -34,9 +37,15 @@ export interface PercentageDisplayProps {
34
37
  /**
35
38
  * Cor de fundo da barra
36
39
  */
37
- barBackgroundColor?: string
40
+ barBackgroundColor?: string,
41
+ /**
42
+ * Variant do componente Typography MUI
43
+ */
44
+ typographyVariant?: TypographyVariant
38
45
  }
39
46
 
47
+
40
48
  declare function PercentageDisplay(props: PercentageDisplayProps): JSX.Element
41
49
 
50
+
42
51
  export default PercentageDisplay;
package/dist/components/PercentageDisplay/PercentageDisplay.js CHANGED
@@ -61,7 +61,9 @@ var useStyles = core_1.makeStyles({
61
61
  }
62
62
  },
63
63
  valueContainer: {
64
- position: 'relative',
64
+ position: 'relative'
65
+ },
66
+ typography: {
65
67
  color: function (_a) {
66
68
  var color = _a.color;
67
69
  return color;
@@ -73,7 +75,7 @@ var useStyles = core_1.makeStyles({
73
75
  }
74
76
  });
75
77
  var PercentageDisplay = function (_a) {
76
- var id = _a.id, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.size, size = _c === void 0 ? 50 : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 6 : _d, _e = _a.fontSize, fontSize = _e === void 0 ? '0.9rem' : _e, _f = _a.color, color = _f === void 0 ? '#000' : _f, _g = _a.backgroundColor, backgroundColor = _g === void 0 ? '#fff' : _g, _h = _a.barColor, barColor = _h === void 0 ? '#00995d' : _h, _j = _a.barBackgroundColor, barBackgroundColor = _j === void 0 ? '#00995d26' : _j;
78
+ var id = _a.id, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.size, size = _c === void 0 ? 50 : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 6 : _d, _e = _a.fontSize, fontSize = _e === void 0 ? '0.9rem' : _e, _f = _a.color, color = _f === void 0 ? '#000' : _f, _g = _a.typographyVariant, typographyVariant = _g === void 0 ? undefined : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#fff' : _h, _j = _a.barColor, barColor = _j === void 0 ? '#00995d' : _j, _k = _a.barBackgroundColor, barBackgroundColor = _k === void 0 ? '#00995d26' : _k;
77
79
  var progressBarWidth = size - barWidth;
78
80
  var classes = useStyles({ color: color, backgroundColor: backgroundColor, barColor: barColor, barBackgroundColor: barBackgroundColor, size: size, progressBarWidth: progressBarWidth, fontSize: fontSize });
79
81
  var percentageDisplayProgressId = id + "-percentageDisplayProgress";
@@ -84,9 +86,12 @@ var PercentageDisplay = function (_a) {
84
86
  return;
85
87
  progressBar.style.background = "conic-gradient(" + barColor + " " + porcentagem * 3.6 + "deg, " + barBackgroundColor + " " + porcentagem * 3.6 + "deg)";
86
88
  }, [barBackgroundColor, barColor, percentage, percentageDisplayProgressId]);
87
- react_1.useEffect(function () { return createProgress(); }, [percentage, createProgress]);
89
+ react_1.useEffect(function () {
90
+ createProgress();
91
+ }, [percentage, createProgress]);
88
92
  return react_1.default.createElement("div", { className: classes.container },
89
93
  react_1.default.createElement("div", { id: percentageDisplayProgressId, className: classes.circularProgress },
90
- react_1.default.createElement("div", { className: classes.valueContainer }, percentage + "%")));
94
+ react_1.default.createElement("div", { className: classes.valueContainer },
95
+ react_1.default.createElement(core_1.Typography, { variant: typographyVariant, className: classes.typography }, percentage + "%"))));
91
96
  };
92
97
  exports.default = PercentageDisplay;
package/lib/components/PercentageDisplay/PercentageDisplay.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ import { TypographyVariant } from '@material-ui/core';
2
+
3
+
1
4
  export interface PercentageDisplayProps {
2
5
  /**
3
6
  * Identificação do elemento
@@ -6,7 +9,7 @@ export interface PercentageDisplayProps {
6
9
  /**
7
10
  * Porcentagem
8
11
  */
9
- percentage?: number|string,
12
+ percentage?: (number|string),
10
13
  /**
11
14
  * Tamanho do componente
12
15
  */
@@ -34,9 +37,15 @@ export interface PercentageDisplayProps {
34
37
  /**
35
38
  * Cor de fundo da barra
36
39
  */
37
- barBackgroundColor?: string
40
+ barBackgroundColor?: string,
41
+ /**
42
+ * Variant do componente Typography MUI
43
+ */
44
+ typographyVariant?: TypographyVariant
38
45
  }
39
46
 
47
+
40
48
  declare function PercentageDisplay(props: PercentageDisplayProps): JSX.Element
41
49
 
50
+
42
51
  export default PercentageDisplay;
package/lib/components/PercentageDisplay/PercentageDisplay.js CHANGED
@@ -1,6 +1,7 @@
1
- import { makeStyles } from '@material-ui/core';
1
+ import { makeStyles, Typography } from '@material-ui/core';
2
2
  import React, { useCallback, useEffect } from 'react';
3
3
 
4
+
4
5
  const useStyles = makeStyles({
5
6
  container: {
6
7
  display: 'grid',
@@ -23,12 +24,15 @@ const useStyles = makeStyles({
23
24
  }
24
25
  },
25
26
  valueContainer: {
26
- position: 'relative',
27
+ position: 'relative'
28
+ },
29
+ typography: {
27
30
  color: ({ color }) => color,
28
31
  fontSize: ({ fontSize }) => fontSize
29
32
  }
30
33
  });
31
34
 
35
+
32
36
  const PercentageDisplay = ({
33
37
  id,
34
38
  percentage = 0,
@@ -36,6 +40,7 @@ const PercentageDisplay = ({
36
40
  barWidth = 6,
37
41
  fontSize = '0.9rem',
38
42
  color = '#000',
43
+ typographyVariant = undefined,
39
44
  backgroundColor = '#fff',
40
45
  barColor = '#00995d',
41
46
  barBackgroundColor = '#00995d26'
@@ -51,15 +56,22 @@ const PercentageDisplay = ({
51
56
  if (!progressBar) return;
52
57
  progressBar.style.background = `conic-gradient(${barColor} ${porcentagem * 3.6}deg, ${barBackgroundColor} ${porcentagem * 3.6}deg)`;
53
58
  }, [barBackgroundColor, barColor, percentage, percentageDisplayProgressId]);
54
- useEffect(() => createProgress(), [percentage, createProgress]);
59
+
60
+ useEffect(() => {
61
+ createProgress();
62
+ }, [percentage, createProgress]);
63
+
55
64
 
56
65
  return <div className={classes.container}>
57
66
  <div id={percentageDisplayProgressId} className={classes.circularProgress}>
58
67
  <div className={classes.valueContainer}>
59
- {`${percentage}%`}
68
+ <Typography variant={typographyVariant} className={classes.typography}>
69
+ {`${percentage}%`}
70
+ </Typography>
60
71
  </div>
61
72
  </div>
62
73
  </div>;
63
74
  };
64
75
 
76
+
65
77
  export default PercentageDisplay;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "argous",
3
- "version": "1.2.243",
3
+ "version": "1.2.244",
4
4
  "description": "Argous.",
5
5
  "main": "lib/index.js",
6
6
  "author": "Carlos Schneider",