argous 1.2.180 → 1.2.182
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.
- package/dist/components/HalfGauge/HalfGauge.d.ts +82 -0
- package/dist/components/HalfGauge/HalfGauge.js +275 -0
- package/dist/components/HalfGauge/index.d.ts +2 -0
- package/dist/components/HalfGauge/index.js +8 -0
- package/dist/components/Programa/PageCodeEasterEgg.d.ts +8 -0
- package/dist/components/Programa/PageCodeEasterEgg.js +78 -0
- package/dist/components/Programa/Programa.js +3 -1
- package/lib/components/HalfGauge/HalfGauge.d.ts +82 -0
- package/lib/components/HalfGauge/HalfGauge.js +267 -0
- package/lib/components/HalfGauge/index.d.ts +2 -0
- package/lib/components/HalfGauge/index.js +1 -0
- package/lib/components/Programa/PageCodeEasterEgg.js +66 -0
- package/lib/components/Programa/Programa.js +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
export interface HalfGaugeProps {
|
|
2
|
+
/**
|
|
3
|
+
* Id do elemento
|
|
4
|
+
*/
|
|
5
|
+
id?: string,
|
|
6
|
+
/**
|
|
7
|
+
* Porcentagem
|
|
8
|
+
*/
|
|
9
|
+
percentage?: number,
|
|
10
|
+
/**
|
|
11
|
+
* Tamanho do componente
|
|
12
|
+
*/
|
|
13
|
+
size?: number,
|
|
14
|
+
/**
|
|
15
|
+
* Tamanho da fonte
|
|
16
|
+
*/
|
|
17
|
+
fontSize?: string,
|
|
18
|
+
/**
|
|
19
|
+
* Cor da fonte do texto
|
|
20
|
+
*/
|
|
21
|
+
color?: string,
|
|
22
|
+
/**
|
|
23
|
+
* Cor de fundo
|
|
24
|
+
*/
|
|
25
|
+
backgroundColor?: string,
|
|
26
|
+
/**
|
|
27
|
+
* Cor de fundo da barra
|
|
28
|
+
*/
|
|
29
|
+
barBackgroundColor?: string,
|
|
30
|
+
/**
|
|
31
|
+
* Tamanho responsivo
|
|
32
|
+
*/
|
|
33
|
+
responsive?: boolean,
|
|
34
|
+
/**
|
|
35
|
+
* Texto utilizado no medidor
|
|
36
|
+
*/
|
|
37
|
+
label?: string,
|
|
38
|
+
/**
|
|
39
|
+
* Ordenação do medidor
|
|
40
|
+
*/
|
|
41
|
+
order?: string,
|
|
42
|
+
/**
|
|
43
|
+
* Texto utilizado como mínimo
|
|
44
|
+
*/
|
|
45
|
+
min?: string,
|
|
46
|
+
/**
|
|
47
|
+
* Texto utilizado como máximo
|
|
48
|
+
*/
|
|
49
|
+
max?: string,
|
|
50
|
+
/**
|
|
51
|
+
* Cor do ponteiro indicador do medidor
|
|
52
|
+
*/
|
|
53
|
+
handColor?: string,
|
|
54
|
+
/**
|
|
55
|
+
* Largura das áreas laterais onde ficará o min e max
|
|
56
|
+
*/
|
|
57
|
+
minMaxWidth?: string,
|
|
58
|
+
/**
|
|
59
|
+
* Cor utilizada no meio do medidor
|
|
60
|
+
*/
|
|
61
|
+
middleColor?: string,
|
|
62
|
+
/**
|
|
63
|
+
* Cor utilizada entre o meio e a direita do medidor
|
|
64
|
+
*/
|
|
65
|
+
middleRightColor?: string,
|
|
66
|
+
/**
|
|
67
|
+
* Cor utilizada na direita do medidor
|
|
68
|
+
*/
|
|
69
|
+
rightColor?: string,
|
|
70
|
+
/**
|
|
71
|
+
* Cor utilizada na esquerda do medidor
|
|
72
|
+
*/
|
|
73
|
+
leftColor?: string,
|
|
74
|
+
/**
|
|
75
|
+
* Cor utilizada entre o meio e a esquerda do medidor
|
|
76
|
+
*/
|
|
77
|
+
middleLeftColor?: string,
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function HalfGauge(props: HalfGaugeProps): JSX.Element
|
|
81
|
+
|
|
82
|
+
export default HalfGauge;
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
33
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
|
+
};
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
var core_1 = require("@material-ui/core");
|
|
37
|
+
var clsx_1 = __importDefault(require("clsx"));
|
|
38
|
+
var lodash_1 = require("lodash");
|
|
39
|
+
var react_1 = __importStar(require("react"));
|
|
40
|
+
var ELLIPSIS_TEXT_STYLE = {
|
|
41
|
+
overflow: 'hidden',
|
|
42
|
+
whiteSpace: 'nowrap',
|
|
43
|
+
textOverflow: 'ellipsis'
|
|
44
|
+
};
|
|
45
|
+
var useStyles = core_1.makeStyles({
|
|
46
|
+
container: {
|
|
47
|
+
display: 'flex',
|
|
48
|
+
height: function (_a) {
|
|
49
|
+
var size = _a.size;
|
|
50
|
+
return size / 2 + "px";
|
|
51
|
+
},
|
|
52
|
+
transition: 'all .3s',
|
|
53
|
+
opacity: function (_a) {
|
|
54
|
+
var responsive = _a.responsive;
|
|
55
|
+
return responsive ? 0 : 1;
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
gauge: {
|
|
59
|
+
height: function (_a) {
|
|
60
|
+
var size = _a.size;
|
|
61
|
+
return size;
|
|
62
|
+
},
|
|
63
|
+
width: function (_a) {
|
|
64
|
+
var size = _a.size;
|
|
65
|
+
return size;
|
|
66
|
+
},
|
|
67
|
+
backgroundColor: function (_a) {
|
|
68
|
+
var barBackgroundColor = _a.barBackgroundColor;
|
|
69
|
+
return barBackgroundColor;
|
|
70
|
+
},
|
|
71
|
+
borderRadius: '50%',
|
|
72
|
+
display: 'grid',
|
|
73
|
+
placeItems: 'center',
|
|
74
|
+
webkitClipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
75
|
+
clipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
76
|
+
'&::before': {
|
|
77
|
+
content: '""',
|
|
78
|
+
position: 'absolute',
|
|
79
|
+
height: function (_a) {
|
|
80
|
+
var gaugeBarWidth = _a.gaugeBarWidth;
|
|
81
|
+
return gaugeBarWidth;
|
|
82
|
+
},
|
|
83
|
+
width: function (_a) {
|
|
84
|
+
var gaugeBarWidth = _a.gaugeBarWidth;
|
|
85
|
+
return gaugeBarWidth;
|
|
86
|
+
},
|
|
87
|
+
borderRadius: '50%',
|
|
88
|
+
backgroundColor: function (_a) {
|
|
89
|
+
var backgroundColor = _a.backgroundColor;
|
|
90
|
+
return backgroundColor;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
valueDiv: {
|
|
95
|
+
position: 'absolute',
|
|
96
|
+
color: function (_a) {
|
|
97
|
+
var color = _a.color;
|
|
98
|
+
return color;
|
|
99
|
+
},
|
|
100
|
+
fontSize: function (_a) {
|
|
101
|
+
var fontSize = _a.fontSize;
|
|
102
|
+
return fontSize;
|
|
103
|
+
},
|
|
104
|
+
maxWidth: function (_a) {
|
|
105
|
+
var size = _a.size;
|
|
106
|
+
return size / 2 + "px";
|
|
107
|
+
},
|
|
108
|
+
minWidth: function (_a) {
|
|
109
|
+
var size = _a.size;
|
|
110
|
+
return size / 2 + "px";
|
|
111
|
+
},
|
|
112
|
+
maxHeight: function (_a) {
|
|
113
|
+
var size = _a.size;
|
|
114
|
+
return size / 4 + "px";
|
|
115
|
+
},
|
|
116
|
+
minHeight: function (_a) {
|
|
117
|
+
var size = _a.size;
|
|
118
|
+
return size / 4 + "px";
|
|
119
|
+
},
|
|
120
|
+
transform: function (_a) {
|
|
121
|
+
var size = _a.size;
|
|
122
|
+
return "translateY(-" + (size / 4) / 2 + "px)";
|
|
123
|
+
},
|
|
124
|
+
display: 'flex',
|
|
125
|
+
flexDirection: 'column',
|
|
126
|
+
alignItems: 'center',
|
|
127
|
+
justifyContent: 'end',
|
|
128
|
+
overflow: 'hidden',
|
|
129
|
+
whiteSpace: 'nowrap',
|
|
130
|
+
padding: 4,
|
|
131
|
+
'&>p': __assign(__assign({}, ELLIPSIS_TEXT_STYLE), { margin: 0, width: '100%', textAlign: 'center', '&:first-child': {
|
|
132
|
+
fontWeight: 'bold'
|
|
133
|
+
} })
|
|
134
|
+
},
|
|
135
|
+
minMax: {
|
|
136
|
+
display: 'flex',
|
|
137
|
+
alignItems: 'end',
|
|
138
|
+
padding: '0 1rem',
|
|
139
|
+
width: function (_a) {
|
|
140
|
+
var minMaxWidth = _a.minMaxWidth;
|
|
141
|
+
return minMaxWidth;
|
|
142
|
+
},
|
|
143
|
+
color: function (_a) {
|
|
144
|
+
var color = _a.color;
|
|
145
|
+
return color;
|
|
146
|
+
},
|
|
147
|
+
fontSize: function (_a) {
|
|
148
|
+
var fontSize = _a.fontSize;
|
|
149
|
+
return fontSize;
|
|
150
|
+
},
|
|
151
|
+
'&>p': {
|
|
152
|
+
margin: 0
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
min: {
|
|
156
|
+
justifyContent: 'end'
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
var getHand = function (percentage, handColor) {
|
|
160
|
+
if (!lodash_1.isNumber(percentage))
|
|
161
|
+
return '';
|
|
162
|
+
var angle = 270;
|
|
163
|
+
if (percentage > 50) {
|
|
164
|
+
angle = 0;
|
|
165
|
+
percentage -= 50;
|
|
166
|
+
}
|
|
167
|
+
var initialTransparentAngle = angle;
|
|
168
|
+
angle = angle + (percentage * 1.8);
|
|
169
|
+
var finalTransparentAngle = angle + 2;
|
|
170
|
+
if (finalTransparentAngle > 90 && finalTransparentAngle < 270) {
|
|
171
|
+
finalTransparentAngle = 90;
|
|
172
|
+
}
|
|
173
|
+
return "conic-gradient(\n #0000 " + initialTransparentAngle + "deg " + (angle - 2) + "deg,\n " + handColor + " " + (angle - 0.5) + "deg " + (angle + 0.5) + "deg,\n #0000 " + finalTransparentAngle + "deg\n )";
|
|
174
|
+
};
|
|
175
|
+
var HalfGauge = function (_a) {
|
|
176
|
+
var _b = _a.responsive, responsive = _b === void 0 ? false : _b, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.label, label = _d === void 0 ? '' : _d, _e = _a.percentage, percentage = _e === void 0 ? 0 : _e, _f = _a.order, order = _f === void 0 ? 'D' : _f, _g = _a.min, min = _g === void 0 ? '' : _g, _h = _a.max, max = _h === void 0 ? '' : _h, _j = _a.size, size = _j === void 0 ? 200 : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '0.9rem' : _k, _l = _a.color, color = _l === void 0 ? '#000' : _l, _m = _a.backgroundColor, backgroundColor = _m === void 0 ? '#fff' : _m, _o = _a.barBackgroundColor, barBackgroundColor = _o === void 0 ? '#0000' : _o, _p = _a.handColor, handColor = _p === void 0 ? '#fff' : _p, _q = _a.minMaxWidth, minMaxWidth = _q === void 0 ? '6rem' : _q, _r = _a.middleColor, middleColor = _r === void 0 ? '#ffdd71' : _r, _s = _a.middleRightColor, middleRightColor = _s === void 0 ? '#fec900' : _s, _t = _a.rightColor, rightColor = _t === void 0 ? '#00995d' : _t, _u = _a.leftColor, leftColor = _u === void 0 ? '#fe6c6c' : _u, _v = _a.middleLeftColor, middleLeftColor = _v === void 0 ? '#ff9b9b' : _v;
|
|
177
|
+
var gaugeBarWidth = size - (size / 2);
|
|
178
|
+
var classes = useStyles({ color: color, backgroundColor: backgroundColor, barBackgroundColor: barBackgroundColor, size: size, gaugeBarWidth: gaugeBarWidth, fontSize: fontSize, minMaxWidth: minMaxWidth, responsive: responsive });
|
|
179
|
+
var halfGaugeId = id + "-halfGauge";
|
|
180
|
+
var halfGaugeHandId = id + "-halfGaugeHand";
|
|
181
|
+
var halfGaugeContainerId = id + "-halfGaugeContainer";
|
|
182
|
+
var percentageText = percentage.toString().replace('.', ',') + "%";
|
|
183
|
+
var defaultColors = react_1.useMemo(function () { return ([middleColor, middleRightColor, rightColor, '#0000', leftColor, middleLeftColor]); }, [leftColor, middleColor, middleLeftColor, middleRightColor, rightColor]);
|
|
184
|
+
var gaugeBackgroundColors = react_1.useMemo(function () {
|
|
185
|
+
var colors = defaultColors;
|
|
186
|
+
if (order === 'A') {
|
|
187
|
+
var left = defaultColors[4];
|
|
188
|
+
var middleLeft = defaultColors[5];
|
|
189
|
+
var middleRight = defaultColors[1];
|
|
190
|
+
var right = defaultColors[2];
|
|
191
|
+
colors.splice(4, 1, right);
|
|
192
|
+
colors.splice(5, 1, middleRight);
|
|
193
|
+
colors.splice(1, 1, middleLeft);
|
|
194
|
+
colors.splice(2, 1, left);
|
|
195
|
+
}
|
|
196
|
+
return colors;
|
|
197
|
+
}, [defaultColors, order]);
|
|
198
|
+
var createStage = react_1.useCallback(function () {
|
|
199
|
+
var gaugeEl = document.getElementById(halfGaugeId);
|
|
200
|
+
if (!gaugeEl)
|
|
201
|
+
return;
|
|
202
|
+
gaugeEl.style.background = "conic-gradient(\n " + gaugeBackgroundColors[0] + " 18deg, \n " + gaugeBackgroundColors[1] + " 18deg 54deg,\n " + gaugeBackgroundColors[2] + " 54deg 90deg,\n " + gaugeBackgroundColors[3] + " 90deg 270deg,\n " + gaugeBackgroundColors[4] + " 270deg 306deg,\n " + gaugeBackgroundColors[5] + " 306deg 342deg,\n " + gaugeBackgroundColors[0] + " 342deg 360deg\n )";
|
|
203
|
+
}, [halfGaugeId, gaugeBackgroundColors]);
|
|
204
|
+
var createHand = react_1.useCallback(function () {
|
|
205
|
+
var hand = getHand(percentage, handColor);
|
|
206
|
+
var gaugeHandEl = document.getElementById(halfGaugeHandId);
|
|
207
|
+
if (!gaugeHandEl || !hand || (!gaugeHandEl && !hand))
|
|
208
|
+
return;
|
|
209
|
+
gaugeHandEl.style.background = hand;
|
|
210
|
+
}, [halfGaugeHandId, percentage, handColor]);
|
|
211
|
+
react_1.useEffect(function () {
|
|
212
|
+
createStage();
|
|
213
|
+
createHand();
|
|
214
|
+
}, [percentage, createStage, createHand]);
|
|
215
|
+
//__RESPONSIVE_SIZE___________________________________________________________________________________
|
|
216
|
+
var makeResponsive = react_1.useCallback(function () {
|
|
217
|
+
var _a;
|
|
218
|
+
if (!halfGaugeContainerId)
|
|
219
|
+
return;
|
|
220
|
+
var containerEl = document.getElementById(halfGaugeContainerId);
|
|
221
|
+
if (containerEl) {
|
|
222
|
+
var parentElClientRect = (_a = containerEl === null || containerEl === void 0 ? void 0 : containerEl.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
223
|
+
if (parentElClientRect) {
|
|
224
|
+
var parentWidth = parentElClientRect === null || parentElClientRect === void 0 ? void 0 : parentElClientRect.width;
|
|
225
|
+
var parentHeight = parentElClientRect === null || parentElClientRect === void 0 ? void 0 : parentElClientRect.height;
|
|
226
|
+
var scale = 1;
|
|
227
|
+
if (parentWidth < 88) {
|
|
228
|
+
scale = 0.2;
|
|
229
|
+
}
|
|
230
|
+
else if (parentWidth < 218) {
|
|
231
|
+
scale = 0.4;
|
|
232
|
+
}
|
|
233
|
+
else if (parentWidth < 346 && parentHeight < 49) {
|
|
234
|
+
scale = 0.5;
|
|
235
|
+
}
|
|
236
|
+
else if (parentWidth < 278 && parentHeight < 143) {
|
|
237
|
+
scale = 0.7;
|
|
238
|
+
}
|
|
239
|
+
else if (parentWidth < 278 && parentHeight < 250) {
|
|
240
|
+
scale = 0.7;
|
|
241
|
+
}
|
|
242
|
+
else if (parentWidth < 346 && parentHeight < 143) {
|
|
243
|
+
scale = 0.7;
|
|
244
|
+
}
|
|
245
|
+
else if (parentWidth < 475 && parentHeight < 49) {
|
|
246
|
+
scale = 0.5;
|
|
247
|
+
}
|
|
248
|
+
else if (parentWidth < 348) {
|
|
249
|
+
scale = 0.9;
|
|
250
|
+
}
|
|
251
|
+
containerEl.style.transform = "scale(" + scale + ")";
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
setTimeout(function () { return makeResponsive(); }, 500);
|
|
255
|
+
}, [halfGaugeContainerId]);
|
|
256
|
+
react_1.useEffect(function () { return responsive && makeResponsive(); }, [responsive, makeResponsive]);
|
|
257
|
+
var displayContainer = react_1.useCallback(function () {
|
|
258
|
+
var containerEl = document.getElementById(halfGaugeContainerId);
|
|
259
|
+
if (containerEl)
|
|
260
|
+
containerEl.style.opacity = 1;
|
|
261
|
+
}, [halfGaugeContainerId]);
|
|
262
|
+
react_1.useEffect(function () { return responsive && setTimeout(function () { return displayContainer(); }, 500); }, [responsive, displayContainer]);
|
|
263
|
+
//____________________________________________________________________________________________________
|
|
264
|
+
return react_1.default.createElement("div", { id: halfGaugeContainerId, className: classes.container },
|
|
265
|
+
react_1.default.createElement("div", { className: clsx_1.default(classes.minMax, classes.min) },
|
|
266
|
+
react_1.default.createElement("p", null, min)),
|
|
267
|
+
react_1.default.createElement("div", { id: halfGaugeId, className: classes.gauge },
|
|
268
|
+
react_1.default.createElement("div", { id: halfGaugeHandId, className: classes.gauge }),
|
|
269
|
+
react_1.default.createElement("div", { className: classes.valueDiv },
|
|
270
|
+
percentageText && react_1.default.createElement("p", null, percentageText),
|
|
271
|
+
label && react_1.default.createElement("p", null, label))),
|
|
272
|
+
react_1.default.createElement("div", { className: classes.minMax },
|
|
273
|
+
react_1.default.createElement("p", null, max)));
|
|
274
|
+
};
|
|
275
|
+
exports.default = HalfGauge;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var HalfGauge_1 = require("./HalfGauge");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(HalfGauge_1).default; } });
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
|
+
var core_1 = require("@material-ui/core");
|
|
34
|
+
var react_1 = __importStar(require("react"));
|
|
35
|
+
var react_redux_1 = require("react-redux");
|
|
36
|
+
var useStyles = core_1.makeStyles(function (theme) { return ({
|
|
37
|
+
container: {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
overflow: 'hidden',
|
|
40
|
+
borderRadius: 4,
|
|
41
|
+
color: theme.palette.type === 'light' ? '#fff' : '#000',
|
|
42
|
+
background: "linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(" + (theme.palette.type === 'light' ? '66,66,66' : '255,255,255') + ",1) 3%)"
|
|
43
|
+
},
|
|
44
|
+
messageDiv: {
|
|
45
|
+
padding: '.5rem 1rem'
|
|
46
|
+
},
|
|
47
|
+
gradientStripe: {
|
|
48
|
+
width: '1rem',
|
|
49
|
+
background: 'linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)'
|
|
50
|
+
}
|
|
51
|
+
}); });
|
|
52
|
+
var SnackbarTransition = function (props) { return react_1.default.createElement(core_1.Slide, __assign({}, props, { direction: 'up' })); };
|
|
53
|
+
var PageCodeEasterEgg = function (_a) {
|
|
54
|
+
var code = _a.code, usuarioLogado = _a.usuarioLogado;
|
|
55
|
+
var classes = useStyles();
|
|
56
|
+
var _b = react_1.useState(false), open = _b[0], setOpen = _b[1];
|
|
57
|
+
function easterEggListener(e) {
|
|
58
|
+
var teamMember = (usuarioLogado === null || usuarioLogado === void 0 ? void 0 : usuarioLogado.idFornecedorInterno) === 1; // Membro da TI
|
|
59
|
+
if (teamMember && code && !open && e.ctrlKey && e.shiftKey && e.key === 'Z')
|
|
60
|
+
setOpen(true);
|
|
61
|
+
}
|
|
62
|
+
react_1.useEffect(function () {
|
|
63
|
+
document.addEventListener('keydown', easterEggListener, false);
|
|
64
|
+
return function () { return document.removeEventListener('keydown', easterEggListener, false); };
|
|
65
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
66
|
+
}, []);
|
|
67
|
+
var handleClose = function (_) { return setOpen(false); };
|
|
68
|
+
return react_1.default.createElement(core_1.Snackbar, { open: open, onClose: handleClose, autoHideDuration: 5000, TransitionComponent: SnackbarTransition, anchorOrigin: { vertical: 'bottom', horizontal: 'left' } },
|
|
69
|
+
react_1.default.createElement("div", { className: classes.container },
|
|
70
|
+
react_1.default.createElement("div", { className: classes.gradientStripe }),
|
|
71
|
+
react_1.default.createElement("div", { className: classes.messageDiv },
|
|
72
|
+
react_1.default.createElement(core_1.Typography, { variant: 'subtitle1' }, "Hi, dev!"),
|
|
73
|
+
react_1.default.createElement(core_1.Typography, { variant: 'body1' }, "The page code is " + code + "."))));
|
|
74
|
+
};
|
|
75
|
+
var mapStateToProps = function (state) { return ({
|
|
76
|
+
usuarioLogado: state.argous.usuarioLogado
|
|
77
|
+
}); };
|
|
78
|
+
exports.default = react_redux_1.connect(mapStateToProps)(PageCodeEasterEgg);
|
|
@@ -81,6 +81,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
81
81
|
};
|
|
82
82
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
83
83
|
var BarraFerramentas_1 = __importDefault(require("./../BarraFerramentas"));
|
|
84
|
+
var PageCodeEasterEgg_1 = __importDefault(require("./PageCodeEasterEgg"));
|
|
84
85
|
var argous = __importStar(require("../../actions"));
|
|
85
86
|
var api_1 = require("../../api");
|
|
86
87
|
var core_1 = require("@material-ui/core");
|
|
@@ -160,7 +161,8 @@ function Programa(_a) {
|
|
|
160
161
|
dsErro ? (react_1.default.createElement(core_1.Box, { textAlign: 'center' },
|
|
161
162
|
react_1.default.createElement(fa_1.FaExclamationTriangle, { style: { color: '#ED1651', width: '90px', height: '90px' } }),
|
|
162
163
|
react_1.default.createElement(core_1.Typography, { variant: 'h6' }, dsErro))) : (!pnlTitle || loading || !loaded) ? (react_1.default.createElement(core_1.Box, { position: 'relative', top: 20, left: '50%', "z-index": 20, height: 80, width: 0, marginLeft: '-20px' },
|
|
163
|
-
react_1.default.createElement(core_1.CircularProgress, { disableShrink: true }))) : children)
|
|
164
|
+
react_1.default.createElement(core_1.CircularProgress, { disableShrink: true }))) : children),
|
|
165
|
+
react_1.default.createElement(PageCodeEasterEgg_1.default, __assign({}, { code: code }))));
|
|
164
166
|
}
|
|
165
167
|
var mapStateToProps = function (state) {
|
|
166
168
|
return { fields: state.argous.fields, favorites: state.argous.favorites };
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
export interface HalfGaugeProps {
|
|
2
|
+
/**
|
|
3
|
+
* Id do elemento
|
|
4
|
+
*/
|
|
5
|
+
id?: string,
|
|
6
|
+
/**
|
|
7
|
+
* Porcentagem
|
|
8
|
+
*/
|
|
9
|
+
percentage?: number,
|
|
10
|
+
/**
|
|
11
|
+
* Tamanho do componente
|
|
12
|
+
*/
|
|
13
|
+
size?: number,
|
|
14
|
+
/**
|
|
15
|
+
* Tamanho da fonte
|
|
16
|
+
*/
|
|
17
|
+
fontSize?: string,
|
|
18
|
+
/**
|
|
19
|
+
* Cor da fonte do texto
|
|
20
|
+
*/
|
|
21
|
+
color?: string,
|
|
22
|
+
/**
|
|
23
|
+
* Cor de fundo
|
|
24
|
+
*/
|
|
25
|
+
backgroundColor?: string,
|
|
26
|
+
/**
|
|
27
|
+
* Cor de fundo da barra
|
|
28
|
+
*/
|
|
29
|
+
barBackgroundColor?: string,
|
|
30
|
+
/**
|
|
31
|
+
* Tamanho responsivo
|
|
32
|
+
*/
|
|
33
|
+
responsive?: boolean,
|
|
34
|
+
/**
|
|
35
|
+
* Texto utilizado no medidor
|
|
36
|
+
*/
|
|
37
|
+
label?: string,
|
|
38
|
+
/**
|
|
39
|
+
* Ordenação do medidor
|
|
40
|
+
*/
|
|
41
|
+
order?: string,
|
|
42
|
+
/**
|
|
43
|
+
* Texto utilizado como mínimo
|
|
44
|
+
*/
|
|
45
|
+
min?: string,
|
|
46
|
+
/**
|
|
47
|
+
* Texto utilizado como máximo
|
|
48
|
+
*/
|
|
49
|
+
max?: string,
|
|
50
|
+
/**
|
|
51
|
+
* Cor do ponteiro indicador do medidor
|
|
52
|
+
*/
|
|
53
|
+
handColor?: string,
|
|
54
|
+
/**
|
|
55
|
+
* Largura das áreas laterais onde ficará o min e max
|
|
56
|
+
*/
|
|
57
|
+
minMaxWidth?: string,
|
|
58
|
+
/**
|
|
59
|
+
* Cor utilizada no meio do medidor
|
|
60
|
+
*/
|
|
61
|
+
middleColor?: string,
|
|
62
|
+
/**
|
|
63
|
+
* Cor utilizada entre o meio e a direita do medidor
|
|
64
|
+
*/
|
|
65
|
+
middleRightColor?: string,
|
|
66
|
+
/**
|
|
67
|
+
* Cor utilizada na direita do medidor
|
|
68
|
+
*/
|
|
69
|
+
rightColor?: string,
|
|
70
|
+
/**
|
|
71
|
+
* Cor utilizada na esquerda do medidor
|
|
72
|
+
*/
|
|
73
|
+
leftColor?: string,
|
|
74
|
+
/**
|
|
75
|
+
* Cor utilizada entre o meio e a esquerda do medidor
|
|
76
|
+
*/
|
|
77
|
+
middleLeftColor?: string,
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function HalfGauge(props: HalfGaugeProps): JSX.Element
|
|
81
|
+
|
|
82
|
+
export default HalfGauge;
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
import { makeStyles } from '@material-ui/core';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { isNumber } from 'lodash';
|
|
4
|
+
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
5
|
+
|
|
6
|
+
const ELLIPSIS_TEXT_STYLE = {
|
|
7
|
+
overflow: 'hidden',
|
|
8
|
+
whiteSpace: 'nowrap',
|
|
9
|
+
textOverflow: 'ellipsis'
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const useStyles = makeStyles({
|
|
13
|
+
container: {
|
|
14
|
+
display: 'flex',
|
|
15
|
+
height: ({ size }) => `${size / 2}px`,
|
|
16
|
+
transition: 'all .3s',
|
|
17
|
+
opacity: ({ responsive }) => responsive ? 0 : 1
|
|
18
|
+
},
|
|
19
|
+
gauge: {
|
|
20
|
+
height: ({ size }) => size,
|
|
21
|
+
width: ({ size }) => size,
|
|
22
|
+
backgroundColor: ({ barBackgroundColor }) => barBackgroundColor,
|
|
23
|
+
borderRadius: '50%',
|
|
24
|
+
display: 'grid',
|
|
25
|
+
placeItems: 'center',
|
|
26
|
+
webkitClipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
27
|
+
clipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
|
|
28
|
+
'&::before': {
|
|
29
|
+
content: '""',
|
|
30
|
+
position: 'absolute',
|
|
31
|
+
height: ({ gaugeBarWidth }) => gaugeBarWidth,
|
|
32
|
+
width: ({ gaugeBarWidth }) => gaugeBarWidth,
|
|
33
|
+
borderRadius: '50%',
|
|
34
|
+
backgroundColor: ({ backgroundColor }) => backgroundColor
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
valueDiv: {
|
|
38
|
+
position: 'absolute',
|
|
39
|
+
color: ({ color }) => color,
|
|
40
|
+
fontSize: ({ fontSize }) => fontSize,
|
|
41
|
+
maxWidth: ({ size }) => `${size / 2}px`,
|
|
42
|
+
minWidth: ({ size }) => `${size / 2}px`,
|
|
43
|
+
maxHeight: ({ size }) => `${size / 4}px`,
|
|
44
|
+
minHeight: ({ size }) => `${size / 4}px`,
|
|
45
|
+
transform: ({ size }) => `translateY(-${(size / 4) / 2}px)`,
|
|
46
|
+
display: 'flex',
|
|
47
|
+
flexDirection: 'column',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
justifyContent: 'end',
|
|
50
|
+
overflow: 'hidden',
|
|
51
|
+
whiteSpace: 'nowrap',
|
|
52
|
+
padding: 4,
|
|
53
|
+
'&>p': {
|
|
54
|
+
...ELLIPSIS_TEXT_STYLE,
|
|
55
|
+
margin: 0,
|
|
56
|
+
width: '100%',
|
|
57
|
+
textAlign: 'center',
|
|
58
|
+
'&:first-child': {
|
|
59
|
+
fontWeight: 'bold'
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
minMax: {
|
|
64
|
+
display: 'flex',
|
|
65
|
+
alignItems: 'end',
|
|
66
|
+
padding: '0 1rem',
|
|
67
|
+
width: ({ minMaxWidth }) => minMaxWidth,
|
|
68
|
+
color: ({ color }) => color,
|
|
69
|
+
fontSize: ({ fontSize }) => fontSize,
|
|
70
|
+
'&>p': {
|
|
71
|
+
margin: 0
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
min: {
|
|
75
|
+
justifyContent: 'end'
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
const getHand = (percentage, handColor) => {
|
|
81
|
+
if (!isNumber(percentage)) return '';
|
|
82
|
+
|
|
83
|
+
let angle = 270;
|
|
84
|
+
|
|
85
|
+
if (percentage > 50) {
|
|
86
|
+
angle = 0;
|
|
87
|
+
percentage -= 50;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const initialTransparentAngle = angle;
|
|
91
|
+
|
|
92
|
+
angle = angle + (percentage * 1.8);
|
|
93
|
+
|
|
94
|
+
let finalTransparentAngle = angle + 2;
|
|
95
|
+
|
|
96
|
+
if (finalTransparentAngle > 90 && finalTransparentAngle < 270) {
|
|
97
|
+
finalTransparentAngle = 90;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return `conic-gradient(
|
|
101
|
+
#0000 ${initialTransparentAngle}deg ${angle - 2}deg,
|
|
102
|
+
${handColor} ${angle - 0.5}deg ${angle + 0.5}deg,
|
|
103
|
+
#0000 ${finalTransparentAngle}deg
|
|
104
|
+
)`;
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
const HalfGauge = ({
|
|
109
|
+
responsive = false,
|
|
110
|
+
id = '',
|
|
111
|
+
label = '',
|
|
112
|
+
percentage = 0,
|
|
113
|
+
order = 'D',
|
|
114
|
+
min = '',
|
|
115
|
+
max = '',
|
|
116
|
+
size = 200,
|
|
117
|
+
fontSize = '0.9rem',
|
|
118
|
+
color = '#000',
|
|
119
|
+
backgroundColor = '#fff',
|
|
120
|
+
barBackgroundColor = '#0000',
|
|
121
|
+
handColor = '#fff',
|
|
122
|
+
minMaxWidth = '6rem',
|
|
123
|
+
middleColor = '#ffdd71',
|
|
124
|
+
middleRightColor = '#fec900',
|
|
125
|
+
rightColor = '#00995d',
|
|
126
|
+
leftColor = '#fe6c6c',
|
|
127
|
+
middleLeftColor = '#ff9b9b'
|
|
128
|
+
}) => {
|
|
129
|
+
|
|
130
|
+
const gaugeBarWidth = size - (size / 2);
|
|
131
|
+
const classes = useStyles({ color, backgroundColor, barBackgroundColor, size, gaugeBarWidth, fontSize, minMaxWidth, responsive });
|
|
132
|
+
|
|
133
|
+
const halfGaugeId = `${id}-halfGauge`;
|
|
134
|
+
const halfGaugeHandId = `${id}-halfGaugeHand`;
|
|
135
|
+
const halfGaugeContainerId = `${id}-halfGaugeContainer`;
|
|
136
|
+
const percentageText = `${percentage.toString().replace('.', ',')}%`;
|
|
137
|
+
|
|
138
|
+
const defaultColors = useMemo(() => (
|
|
139
|
+
[middleColor, middleRightColor, rightColor, '#0000', leftColor, middleLeftColor]
|
|
140
|
+
), [leftColor, middleColor, middleLeftColor, middleRightColor, rightColor]);
|
|
141
|
+
|
|
142
|
+
const gaugeBackgroundColors = useMemo(() => {
|
|
143
|
+
let colors = defaultColors;
|
|
144
|
+
|
|
145
|
+
if (order === 'A') {
|
|
146
|
+
const left = defaultColors[4];
|
|
147
|
+
const middleLeft = defaultColors[5];
|
|
148
|
+
const middleRight = defaultColors[1];
|
|
149
|
+
const right = defaultColors[2];
|
|
150
|
+
|
|
151
|
+
colors.splice(4, 1, right);
|
|
152
|
+
colors.splice(5, 1, middleRight);
|
|
153
|
+
colors.splice(1, 1, middleLeft);
|
|
154
|
+
colors.splice(2, 1, left);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
return colors;
|
|
158
|
+
}, [defaultColors, order]);
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
const createStage = useCallback(() => {
|
|
162
|
+
const gaugeEl = document.getElementById(halfGaugeId);
|
|
163
|
+
if (!gaugeEl) return;
|
|
164
|
+
|
|
165
|
+
gaugeEl.style.background = `conic-gradient(
|
|
166
|
+
${gaugeBackgroundColors[0]} 18deg,
|
|
167
|
+
${gaugeBackgroundColors[1]} 18deg 54deg,
|
|
168
|
+
${gaugeBackgroundColors[2]} 54deg 90deg,
|
|
169
|
+
${gaugeBackgroundColors[3]} 90deg 270deg,
|
|
170
|
+
${gaugeBackgroundColors[4]} 270deg 306deg,
|
|
171
|
+
${gaugeBackgroundColors[5]} 306deg 342deg,
|
|
172
|
+
${gaugeBackgroundColors[0]} 342deg 360deg
|
|
173
|
+
)`;
|
|
174
|
+
|
|
175
|
+
}, [halfGaugeId, gaugeBackgroundColors]);
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
const createHand = useCallback(() => {
|
|
179
|
+
const hand = getHand(percentage, handColor);
|
|
180
|
+
const gaugeHandEl = document.getElementById(halfGaugeHandId);
|
|
181
|
+
if (!gaugeHandEl || !hand || (!gaugeHandEl && !hand)) return;
|
|
182
|
+
|
|
183
|
+
gaugeHandEl.style.background = hand;
|
|
184
|
+
}, [halfGaugeHandId, percentage, handColor]);
|
|
185
|
+
|
|
186
|
+
useEffect(() => {
|
|
187
|
+
createStage();
|
|
188
|
+
createHand();
|
|
189
|
+
}, [percentage, createStage, createHand]);
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
//__RESPONSIVE_SIZE___________________________________________________________________________________
|
|
193
|
+
|
|
194
|
+
const makeResponsive = useCallback(() => {
|
|
195
|
+
if (!halfGaugeContainerId) return;
|
|
196
|
+
|
|
197
|
+
const containerEl = document.getElementById(halfGaugeContainerId);
|
|
198
|
+
|
|
199
|
+
if (containerEl) {
|
|
200
|
+
|
|
201
|
+
const parentElClientRect = containerEl?.parentElement?.getBoundingClientRect();
|
|
202
|
+
|
|
203
|
+
if (parentElClientRect) {
|
|
204
|
+
|
|
205
|
+
const parentWidth = parentElClientRect?.width;
|
|
206
|
+
const parentHeight = parentElClientRect?.height;
|
|
207
|
+
|
|
208
|
+
let scale = 1;
|
|
209
|
+
|
|
210
|
+
if (parentWidth < 88) {
|
|
211
|
+
scale = 0.2;
|
|
212
|
+
} else if (parentWidth < 218) {
|
|
213
|
+
scale = 0.4;
|
|
214
|
+
} else if (parentWidth < 346 && parentHeight < 49) {
|
|
215
|
+
scale = 0.5;
|
|
216
|
+
} else if (parentWidth < 278 && parentHeight < 143) {
|
|
217
|
+
scale = 0.7;
|
|
218
|
+
} else if (parentWidth < 278 && parentHeight < 250) {
|
|
219
|
+
scale = 0.7;
|
|
220
|
+
} else if (parentWidth < 346 && parentHeight < 143) {
|
|
221
|
+
scale = 0.7;
|
|
222
|
+
} else if (parentWidth < 475 && parentHeight < 49) {
|
|
223
|
+
scale = 0.5;
|
|
224
|
+
} else if (parentWidth < 348) {
|
|
225
|
+
scale = 0.9;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
containerEl.style.transform = `scale(${scale})`;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
setTimeout(() => makeResponsive(), 500);
|
|
233
|
+
}, [halfGaugeContainerId]);
|
|
234
|
+
useEffect(() => responsive && makeResponsive(), [responsive, makeResponsive]);
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
const displayContainer = useCallback(() => {
|
|
238
|
+
const containerEl = document.getElementById(halfGaugeContainerId);
|
|
239
|
+
if (containerEl) containerEl.style.opacity = 1;
|
|
240
|
+
}, [halfGaugeContainerId]);
|
|
241
|
+
useEffect(() => responsive && setTimeout(() => displayContainer(), 500), [responsive, displayContainer]);
|
|
242
|
+
|
|
243
|
+
//____________________________________________________________________________________________________
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
return <div id={halfGaugeContainerId} className={classes.container}>
|
|
247
|
+
<div className={clsx(classes.minMax, classes.min)}>
|
|
248
|
+
<p>
|
|
249
|
+
{min}
|
|
250
|
+
</p>
|
|
251
|
+
</div>
|
|
252
|
+
<div id={halfGaugeId} className={classes.gauge}>
|
|
253
|
+
<div id={halfGaugeHandId} className={classes.gauge} />
|
|
254
|
+
<div className={classes.valueDiv}>
|
|
255
|
+
{percentageText && <p>{percentageText}</p>}
|
|
256
|
+
{label && <p>{label}</p>}
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
<div className={classes.minMax}>
|
|
260
|
+
<p>
|
|
261
|
+
{max}
|
|
262
|
+
</p>
|
|
263
|
+
</div>
|
|
264
|
+
</div>;
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
export default HalfGauge;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './HalfGauge';
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { makeStyles, Slide, Snackbar, Typography } from '@material-ui/core';
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import { connect } from 'react-redux';
|
|
4
|
+
|
|
5
|
+
const useStyles = makeStyles(theme => ({
|
|
6
|
+
container: {
|
|
7
|
+
display: 'flex',
|
|
8
|
+
overflow: 'hidden',
|
|
9
|
+
borderRadius: 4,
|
|
10
|
+
color: theme.palette.type === 'light' ? '#fff' : '#000',
|
|
11
|
+
background: `linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(${theme.palette.type === 'light' ? '66,66,66' : '255,255,255' },1) 3%)`
|
|
12
|
+
},
|
|
13
|
+
messageDiv: {
|
|
14
|
+
padding: '.5rem 1rem'
|
|
15
|
+
},
|
|
16
|
+
gradientStripe: {
|
|
17
|
+
width: '1rem',
|
|
18
|
+
background: 'linear-gradient(180deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)'
|
|
19
|
+
}
|
|
20
|
+
}));
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
const SnackbarTransition = props => <Slide {...props} direction='up' />;
|
|
24
|
+
|
|
25
|
+
const PageCodeEasterEgg = ({ code, usuarioLogado }) => {
|
|
26
|
+
|
|
27
|
+
const classes = useStyles();
|
|
28
|
+
const [open, setOpen] = useState(false);
|
|
29
|
+
|
|
30
|
+
function easterEggListener(e) {
|
|
31
|
+
const teamMember = usuarioLogado?.idFornecedorInterno === 1; // Membro da TI
|
|
32
|
+
if (teamMember && code && !open && e.ctrlKey && e.shiftKey && e.key === 'Z') setOpen(true);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
document.addEventListener('keydown', easterEggListener, false);
|
|
37
|
+
return () => document.removeEventListener('keydown', easterEggListener, false);
|
|
38
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
+
}, []);
|
|
40
|
+
|
|
41
|
+
const handleClose = _ => setOpen(false);
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
return <Snackbar
|
|
45
|
+
open={open}
|
|
46
|
+
onClose={handleClose}
|
|
47
|
+
autoHideDuration={5000}
|
|
48
|
+
TransitionComponent={SnackbarTransition}
|
|
49
|
+
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
|
50
|
+
>
|
|
51
|
+
<div className={classes.container}>
|
|
52
|
+
<div className={classes.gradientStripe} />
|
|
53
|
+
<div className={classes.messageDiv}>
|
|
54
|
+
<Typography variant='subtitle1'>Hi, dev!</Typography>
|
|
55
|
+
<Typography variant='body1'>{`The page code is ${code}.`}</Typography>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</Snackbar>;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
const mapStateToProps = (state) => ({
|
|
63
|
+
usuarioLogado: state.argous.usuarioLogado
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
export default connect(mapStateToProps)(PageCodeEasterEgg);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import BarraFerramentas from './../BarraFerramentas';
|
|
2
|
+
import PageCodeEasterEgg from './PageCodeEasterEgg';
|
|
2
3
|
import * as argous from '../../actions';
|
|
3
4
|
import { getProgram, toggleFavorite } from '../../api';
|
|
4
5
|
import { Box, CircularProgress, Paper, Typography, useTheme } from '@material-ui/core';
|
|
@@ -126,6 +127,7 @@ function Programa({
|
|
|
126
127
|
</Box>
|
|
127
128
|
) : children}
|
|
128
129
|
</Paper>
|
|
130
|
+
<PageCodeEasterEgg {...{ code }} />
|
|
129
131
|
</Box>
|
|
130
132
|
);
|
|
131
133
|
}
|