@cuemath/leap 3.3.33-as1 → 3.3.33-as2
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/features/ui/timers/class-time/animations/open-close.js +47 -52
- package/dist/features/ui/timers/class-time/animations/open-close.js.map +1 -1
- package/dist/features/ui/timers/class-time/animations/ripple.js +33 -28
- package/dist/features/ui/timers/class-time/animations/ripple.js.map +1 -1
- package/dist/features/ui/timers/class-time/class-time.js +20 -16
- package/dist/features/ui/timers/class-time/class-time.js.map +1 -1
- package/dist/features/ui/timers/class-time/constants.js +11 -19
- package/dist/features/ui/timers/class-time/constants.js.map +1 -1
- package/dist/features/ui/timers/class-time/use-class-time-logic.js +43 -43
- package/dist/features/ui/timers/class-time/use-class-time-logic.js.map +1 -1
- package/dist/features/ui/timers/countdown-timer/countdown-timer.js +35 -32
- package/dist/features/ui/timers/countdown-timer/countdown-timer.js.map +1 -1
- package/dist/features/utils/utils.js +18 -18
- package/dist/features/utils/utils.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,93 +1,88 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { jsxs as T, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { memo as I, useState as g, useEffect as b } from "react";
|
|
3
|
+
import f, { keyframes as m, css as u } from "styled-components";
|
|
4
|
+
import $ from "../../../layout/flex-view.js";
|
|
5
|
+
const p = m`
|
|
6
6
|
0% {
|
|
7
7
|
transform: translateX(-100%);
|
|
8
8
|
}
|
|
9
9
|
100% {
|
|
10
10
|
transform: translateX(0%);
|
|
11
11
|
}
|
|
12
|
-
`,
|
|
12
|
+
`, y = m`
|
|
13
13
|
0% {
|
|
14
14
|
transform: translateX(0%);
|
|
15
15
|
}
|
|
16
16
|
100% {
|
|
17
17
|
transform: translateX(-100%);
|
|
18
18
|
}
|
|
19
|
-
`,
|
|
19
|
+
`, c = 1 * 1e3, E = 1.5 * 1e3, X = f($)`
|
|
20
20
|
position: absolute;
|
|
21
21
|
z-index: 10;
|
|
22
22
|
overflow: hidden;
|
|
23
|
-
`, z =
|
|
23
|
+
`, z = f.div`
|
|
24
24
|
position: absolute;
|
|
25
25
|
cursor: pointer;
|
|
26
26
|
z-index: 1;
|
|
27
|
-
`, M =
|
|
28
|
-
animation-name: ${({ $animate: t }) => t ?
|
|
27
|
+
`, M = f($)`
|
|
28
|
+
animation-name: ${({ $animate: t }) => t ? p : y};
|
|
29
29
|
max-width: fit-content;
|
|
30
|
-
animation-duration: ${
|
|
30
|
+
animation-duration: ${c / 1e3}s;
|
|
31
31
|
animation-timing-function: ease-in-out;
|
|
32
32
|
animation-fill-mode: forwards;
|
|
33
33
|
overflow: hidden;
|
|
34
34
|
white-space: nowrap;
|
|
35
35
|
height: 100%;
|
|
36
|
-
${({ $isIcon: t, $size:
|
|
37
|
-
padding-left: ${
|
|
36
|
+
${({ $isIcon: t, $size: s }) => t && u`
|
|
37
|
+
padding-left: ${s}px;
|
|
38
38
|
`};
|
|
39
|
-
${({ $isVisible: t }) => !t &&
|
|
39
|
+
${({ $isVisible: t }) => !t && u`
|
|
40
40
|
visibility: hidden;
|
|
41
41
|
`};
|
|
42
|
-
`,
|
|
42
|
+
`, R = ({
|
|
43
43
|
background: t,
|
|
44
|
-
children:
|
|
45
|
-
Icon:
|
|
46
|
-
onAnimationComplete:
|
|
47
|
-
onOpenAnimationComplete:
|
|
48
|
-
size:
|
|
49
|
-
visible:
|
|
50
|
-
idleTime:
|
|
44
|
+
children: s,
|
|
45
|
+
Icon: i = null,
|
|
46
|
+
onAnimationComplete: r,
|
|
47
|
+
onOpenAnimationComplete: e,
|
|
48
|
+
size: h = null,
|
|
49
|
+
visible: a,
|
|
50
|
+
idleTime: d = E
|
|
51
51
|
}) => {
|
|
52
|
-
const [
|
|
53
|
-
return
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const c = setTimeout(() => {
|
|
58
|
-
o.current = !0, m(!1), a == null || a();
|
|
59
|
-
}, u + l);
|
|
60
|
-
return () => {
|
|
61
|
-
clearTimeout(c);
|
|
62
|
-
};
|
|
52
|
+
const [w, n] = g(!1);
|
|
53
|
+
return b(() => {
|
|
54
|
+
if (!a) {
|
|
55
|
+
n(!1);
|
|
56
|
+
return;
|
|
63
57
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
/* @__PURE__ */
|
|
58
|
+
n(!0);
|
|
59
|
+
let o;
|
|
60
|
+
const x = setTimeout(() => {
|
|
61
|
+
n(!1), e == null || e(), o = setTimeout(() => {
|
|
62
|
+
r == null || r();
|
|
63
|
+
}, c);
|
|
64
|
+
}, c + d);
|
|
65
|
+
return () => {
|
|
66
|
+
clearTimeout(x), o && clearTimeout(o);
|
|
67
|
+
};
|
|
68
|
+
}, [a, d, r, e]), /* @__PURE__ */ T(X, { $flexDirection: "row", $alignItems: "center", $borderRadius: 16, children: [
|
|
69
|
+
i && /* @__PURE__ */ l(z, { children: i }),
|
|
70
|
+
/* @__PURE__ */ l(
|
|
76
71
|
M,
|
|
77
72
|
{
|
|
78
73
|
$alignItems: "center",
|
|
79
|
-
$animate:
|
|
74
|
+
$animate: w,
|
|
80
75
|
$background: t,
|
|
81
76
|
$borderRadius: 16,
|
|
82
|
-
$isIcon: !!
|
|
83
|
-
$isVisible:
|
|
84
|
-
$size:
|
|
85
|
-
children:
|
|
77
|
+
$isIcon: !!i,
|
|
78
|
+
$isVisible: a,
|
|
79
|
+
$size: h,
|
|
80
|
+
children: s
|
|
86
81
|
}
|
|
87
82
|
)
|
|
88
83
|
] });
|
|
89
|
-
},
|
|
84
|
+
}, F = I(R);
|
|
90
85
|
export {
|
|
91
|
-
|
|
86
|
+
F as default
|
|
92
87
|
};
|
|
93
88
|
//# sourceMappingURL=open-close.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"open-close.js","sources":["../../../../../../src/features/ui/timers/class-time/animations/open-close.tsx"],"sourcesContent":["import React, { useState, useEffect,
|
|
1
|
+
{"version":3,"file":"open-close.js","sources":["../../../../../../src/features/ui/timers/class-time/animations/open-close.tsx"],"sourcesContent":["import React, { useState, useEffect, memo } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../../layout/flex-view';\n\nconst FillAnimation = keyframes`\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(0%);\n }\n`;\n\nconst EmptyAnimation = keyframes`\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(-100%);\n }\n`;\n\nconst ANIMATION_TIME = 1 * 1000; // 1 seconds\nconst IDLE_TIME = 1.5 * 1000;\n\nconst StyledRow = styled(FlexView)`\n position: absolute;\n z-index: 10;\n overflow: hidden;\n`;\n\nconst IconWrapper = styled.div`\n position: absolute;\n cursor: pointer;\n z-index: 1;\n`;\n\nconst Wrapper = styled(FlexView)<{\n $animate: boolean;\n $isIcon: boolean;\n $isVisible: boolean;\n $size: number | null;\n}>`\n animation-name: ${({ $animate }) => ($animate ? FillAnimation : EmptyAnimation)};\n max-width: fit-content;\n animation-duration: ${ANIMATION_TIME / 1000}s;\n animation-timing-function: ease-in-out;\n animation-fill-mode: forwards;\n overflow: hidden;\n white-space: nowrap;\n height: 100%;\n ${({ $isIcon, $size }) =>\n $isIcon &&\n css`\n padding-left: ${$size}px;\n `};\n ${({ $isVisible }) =>\n !$isVisible &&\n css`\n visibility: hidden;\n `};\n`;\n\ninterface OpenCloseAnimationProps {\n background: 'ORANGE_4' | 'YELLOW_3' | 'BLACK';\n children: React.ReactNode;\n visible: boolean;\n idleTime?: number;\n Icon?: React.ReactNode;\n onAnimationComplete?: () => void;\n onOpenAnimationComplete?: () => void;\n size?: number | null;\n}\n\nconst OpenCloseAnimation: React.FC<OpenCloseAnimationProps> = ({\n background,\n children,\n Icon = null,\n onAnimationComplete,\n onOpenAnimationComplete,\n size = null,\n visible,\n idleTime = IDLE_TIME,\n}) => {\n const [animate, setAnimate] = useState(false);\n\n useEffect(() => {\n if (!visible) {\n setAnimate(false);\n\n return;\n }\n setAnimate(true);\n\n let closeTimer: NodeJS.Timeout;\n\n const openTimer = setTimeout(() => {\n setAnimate(false);\n onOpenAnimationComplete?.();\n closeTimer = setTimeout(() => {\n onAnimationComplete?.();\n }, ANIMATION_TIME);\n }, ANIMATION_TIME + idleTime);\n\n return () => {\n clearTimeout(openTimer);\n if (closeTimer) {\n clearTimeout(closeTimer);\n }\n };\n }, [visible, idleTime, onAnimationComplete, onOpenAnimationComplete]);\n\n return (\n <StyledRow $flexDirection=\"row\" $alignItems=\"center\" $borderRadius={16}>\n {Icon && <IconWrapper>{Icon}</IconWrapper>}\n <Wrapper\n $alignItems=\"center\"\n $animate={animate}\n $background={background}\n $borderRadius={16}\n $isIcon={!!Icon}\n $isVisible={visible}\n $size={size}\n >\n {children}\n </Wrapper>\n </StyledRow>\n );\n};\n\nexport default memo(OpenCloseAnimation);\n"],"names":["FillAnimation","keyframes","EmptyAnimation","ANIMATION_TIME","IDLE_TIME","StyledRow","styled","FlexView","IconWrapper","Wrapper","$animate","$isIcon","$size","css","$isVisible","OpenCloseAnimation","background","children","Icon","onAnimationComplete","onOpenAnimationComplete","size","visible","idleTime","animate","setAnimate","useState","useEffect","closeTimer","openTimer","jsx","OpenCloseAnimation$1","memo"],"mappings":";;;;AAKA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShBC,IAAiBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjBE,IAAiB,IAAI,KACrBC,IAAY,MAAM,KAElBC,IAAYC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM3BC,IAAcF,EAAO;AAAA;AAAA;AAAA;AAAA,GAMrBG,IAAUH,EAAOC,CAAQ;AAAA,oBAMX,CAAC,EAAE,UAAAG,EAAA,MAAgBA,IAAWV,IAAgBE,CAAe;AAAA;AAAA,wBAEzDC,IAAiB,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzC,CAAC,EAAE,SAAAQ,GAAS,OAAAC,EAAA,MACZD,KACAE;AAAA,sBACkBD,CAAK;AAAA,KACtB;AAAA,IACD,CAAC,EAAE,YAAAE,EAAW,MACd,CAACA,KACDD;AAAA;AAAA,KAEC;AAAA,GAcCE,IAAwD,CAAC;AAAA,EAC7D,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAWnB;AACb,MAAM;AACJ,QAAM,CAACoB,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,SAAAC,EAAU,MAAM;AACd,QAAI,CAACL,GAAS;AACZ,MAAAG,EAAW,EAAK;AAEhB;AAAA,IACF;AACA,IAAAA,EAAW,EAAI;AAEX,QAAAG;AAEE,UAAAC,IAAY,WAAW,MAAM;AACjC,MAAAJ,EAAW,EAAK,GACUL,KAAA,QAAAA,KAC1BQ,IAAa,WAAW,MAAM;AACN,QAAAT,KAAA,QAAAA;AAAA,SACrBhB,CAAc;AAAA,IAAA,GAChBA,IAAiBoB,CAAQ;AAE5B,WAAO,MAAM;AACX,mBAAaM,CAAS,GAClBD,KACF,aAAaA,CAAU;AAAA,IACzB;AAAA,KAED,CAACN,GAASC,GAAUJ,GAAqBC,CAAuB,CAAC,qBAGjEf,GAAU,EAAA,gBAAe,OAAM,aAAY,UAAS,eAAe,IACjE,UAAA;AAAA,IAAQa,KAAA,gBAAAY,EAACtB,KAAa,UAAKU,EAAA,CAAA;AAAA,IAC5B,gBAAAY;AAAA,MAACrB;AAAA,MAAA;AAAA,QACC,aAAY;AAAA,QACZ,UAAUe;AAAA,QACV,aAAaR;AAAA,QACb,eAAe;AAAA,QACf,SAAS,CAAC,CAACE;AAAA,QACX,YAAYI;AAAA,QACZ,OAAOD;AAAA,QAEN,UAAAJ;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEec,IAAAC,EAAKjB,CAAkB;"}
|
|
@@ -1,44 +1,49 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { memo as a } from "react";
|
|
3
|
-
import
|
|
3
|
+
import l, { css as m, keyframes as $ } from "styled-components";
|
|
4
4
|
import x from "../../../layout/flex-view.js";
|
|
5
|
-
import { getTheme as
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
import { getTheme as c } from "../../../theme/get-theme.js";
|
|
6
|
+
const s = c(), e = (o, t) => ({
|
|
7
|
+
ORANGE_3: {
|
|
8
|
+
1: s.colors.ORANGE_3,
|
|
9
|
+
0.5: s.colors.ORANGE_2,
|
|
10
|
+
0: s.colors.ORANGE_1
|
|
11
|
+
},
|
|
12
|
+
YELLOW_3: {
|
|
13
|
+
1: s.colors.YELLOW_3,
|
|
14
|
+
0.5: s.colors.YELLOW_2,
|
|
15
|
+
0: s.colors.YELLOW_1
|
|
16
|
+
}
|
|
17
|
+
})[o][t] || s.colors.ORANGE_3, d = (o) => $`
|
|
13
18
|
0% {
|
|
14
19
|
box-shadow:
|
|
15
|
-
0 2px 5px ${e},
|
|
16
|
-
0 0 0 0 ${e},
|
|
17
|
-
0 0 0 2px ${
|
|
18
|
-
0 0 0 5px ${
|
|
20
|
+
0 2px 5px ${e(o, 1)},
|
|
21
|
+
0 0 0 0 ${e(o, 1)},
|
|
22
|
+
0 0 0 2px ${e(o, 0.5)},
|
|
23
|
+
0 0 0 5px ${e(o, 0.5)};
|
|
19
24
|
}
|
|
20
25
|
100% {
|
|
21
26
|
box-shadow:
|
|
22
|
-
0 2px 5px ${
|
|
23
|
-
0 0 0 2px ${
|
|
24
|
-
0 0 0 5px ${
|
|
25
|
-
0 0 0 10px ${
|
|
27
|
+
0 2px 5px ${e(o, 0.5)},
|
|
28
|
+
0 0 0 2px ${e(o, 0.5)},
|
|
29
|
+
0 0 0 5px ${e(o, 0.5)},
|
|
30
|
+
0 0 0 10px ${e(o, 0)};
|
|
26
31
|
}
|
|
27
|
-
`,
|
|
28
|
-
${({ $visible:
|
|
29
|
-
animation: ${
|
|
32
|
+
`, f = l.div`
|
|
33
|
+
${({ $visible: o, $borderRadius: t, $color: r }) => o && m`
|
|
34
|
+
animation: ${d(r)} 1s linear infinite;
|
|
30
35
|
background: transparent;
|
|
31
36
|
border-radius: ${t}px;
|
|
32
37
|
z-index: 1;
|
|
33
38
|
`};
|
|
34
|
-
`,
|
|
35
|
-
children:
|
|
39
|
+
`, E = ({
|
|
40
|
+
children: o,
|
|
36
41
|
visible: t = !1,
|
|
37
|
-
color:
|
|
38
|
-
borderRadius:
|
|
39
|
-
...
|
|
40
|
-
}) => /* @__PURE__ */
|
|
42
|
+
color: r = "YELLOW_3",
|
|
43
|
+
borderRadius: n = 24,
|
|
44
|
+
...p
|
|
45
|
+
}) => /* @__PURE__ */ i(x, { $position: "relative", $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ i(f, { $visible: t, $color: r, $borderRadius: n, ...p, children: o }) }), b = a(E);
|
|
41
46
|
export {
|
|
42
|
-
|
|
47
|
+
b as default
|
|
43
48
|
};
|
|
44
49
|
//# sourceMappingURL=ripple.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ripple.js","sources":["../../../../../../src/features/ui/timers/class-time/animations/ripple.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"ripple.js","sources":["../../../../../../src/features/ui/timers/class-time/animations/ripple.tsx"],"sourcesContent":["import { memo, type ReactNode } from 'react';\nimport styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../layout/flex-view';\nimport { getTheme } from '../../../theme/get-theme';\n\nconst theme = getTheme();\n\nconst getColor = (color: 'ORANGE_3' | 'YELLOW_3', opacity: number) => {\n const colorMap = {\n ORANGE_3: {\n 1: theme.colors.ORANGE_3,\n 0.5: theme.colors.ORANGE_2,\n 0: theme.colors.ORANGE_1,\n },\n YELLOW_3: {\n 1: theme.colors.YELLOW_3,\n 0.5: theme.colors.YELLOW_2,\n 0: theme.colors.YELLOW_1,\n },\n };\n\n type OpacityKey = keyof typeof colorMap.ORANGE_3;\n\n return colorMap[color][opacity as OpacityKey] || theme.colors.ORANGE_3;\n};\n\nconst pulse = (color: 'ORANGE_3' | 'YELLOW_3') => keyframes`\n 0% {\n box-shadow: \n 0 2px 5px ${getColor(color, 1)},\n 0 0 0 0 ${getColor(color, 1)},\n 0 0 0 2px ${getColor(color, 0.5)},\n 0 0 0 5px ${getColor(color, 0.5)};\n }\n 100% {\n box-shadow:\n 0 2px 5px ${getColor(color, 0.5)},\n 0 0 0 2px ${getColor(color, 0.5)},\n 0 0 0 5px ${getColor(color, 0.5)},\n 0 0 0 10px ${getColor(color, 0)};\n }\n`;\n\ninterface PulseProps {\n $visible: boolean;\n $borderRadius: number;\n $color: 'ORANGE_3' | 'YELLOW_3';\n}\n\nconst Pulse = styled.div<PulseProps>`\n ${({ $visible, $borderRadius, $color }) =>\n $visible &&\n css`\n animation: ${pulse($color)} 1s linear infinite;\n background: transparent;\n border-radius: ${$borderRadius}px;\n z-index: 1;\n `};\n`;\n\ninterface PulsatingProps {\n children: ReactNode;\n visible?: boolean;\n color?: 'ORANGE_3' | 'YELLOW_3';\n borderRadius?: number;\n}\n\nconst Pulsating = ({\n children,\n visible = false,\n color = 'YELLOW_3',\n borderRadius = 24,\n ...other\n}: PulsatingProps) => (\n <FlexView $position=\"relative\" $alignItems=\"center\" $justifyContent=\"center\">\n <Pulse $visible={visible} $color={color} $borderRadius={borderRadius} {...other}>\n {children}\n </Pulse>\n </FlexView>\n);\n\nexport default memo(Pulsating);\n"],"names":["theme","getTheme","getColor","color","opacity","pulse","keyframes","Pulse","styled","$visible","$borderRadius","$color","css","Pulsating","children","visible","borderRadius","other","FlexView","jsx","Ripple","memo"],"mappings":";;;;;AAMA,MAAMA,IAAQC,EAAS,GAEjBC,IAAW,CAACC,GAAgCC,OAC/B;AAAA,EACf,UAAU;AAAA,IACR,GAAGJ,EAAM,OAAO;AAAA,IAChB,KAAKA,EAAM,OAAO;AAAA,IAClB,GAAGA,EAAM,OAAO;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,GAAGA,EAAM,OAAO;AAAA,IAChB,KAAKA,EAAM,OAAO;AAAA,IAClB,GAAGA,EAAM,OAAO;AAAA,EAClB;AAAA,GAKcG,CAAK,EAAEC,CAAqB,KAAKJ,EAAM,OAAO,UAG1DK,IAAQ,CAACF,MAAmCG;AAAA;AAAA;AAAA,kBAGhCJ,EAASC,GAAO,CAAC,CAAC;AAAA,gBACpBD,EAASC,GAAO,CAAC,CAAC;AAAA,kBAChBD,EAASC,GAAO,GAAG,CAAC;AAAA,kBACpBD,EAASC,GAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIpBD,EAASC,GAAO,GAAG,CAAC;AAAA,kBACpBD,EAASC,GAAO,GAAG,CAAC;AAAA,kBACpBD,EAASC,GAAO,GAAG,CAAC;AAAA,mBACnBD,EAASC,GAAO,CAAC,CAAC;AAAA;AAAA,GAU/BI,IAAQC,EAAO;AAAA,IACjB,CAAC,EAAE,UAAAC,GAAU,eAAAC,GAAe,QAAAC,QAC5BF,KACAG;AAAA,mBACeP,EAAMM,CAAM,CAAC;AAAA;AAAA,uBAETD,CAAa;AAAA;AAAA,KAE/B;AAAA,GAUCG,IAAY,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAZ,IAAQ;AAAA,EACR,cAAAa,IAAe;AAAA,EACf,GAAGC;AACL,wBACGC,GAAS,EAAA,WAAU,YAAW,aAAY,UAAS,iBAAgB,UAClE,UAAA,gBAAAC,EAACZ,KAAM,UAAUQ,GAAS,QAAQZ,GAAO,eAAea,GAAe,GAAGC,GACvE,UAAAH,EACH,CAAA,EACF,CAAA,GAGaM,IAAAC,EAAKR,CAAS;"}
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import a from "../
|
|
8
|
-
import p from "
|
|
9
|
-
import
|
|
1
|
+
import { jsx as r, jsxs as m } from "react/jsx-runtime";
|
|
2
|
+
import { memo as c } from "react";
|
|
3
|
+
import l from "styled-components";
|
|
4
|
+
import n from "../../../../assets/line-icons/icons/clock2.js";
|
|
5
|
+
import s from "../../../hooks/use-visibility-change.js";
|
|
6
|
+
import e from "../../layout/flex-view.js";
|
|
7
|
+
import a from "../clock/clock.js";
|
|
8
|
+
import p from "../timer/timer.js";
|
|
9
|
+
import f from "./class-time-animation-wrapper.js";
|
|
10
10
|
import { useClassTimeLogic as $ } from "./use-class-time-logic.js";
|
|
11
|
-
const d = (e)
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
const d = l(e)`
|
|
12
|
+
svg {
|
|
13
|
+
color: ${(i) => i.theme.colors[i.$iconColor]};
|
|
14
|
+
}
|
|
15
|
+
`, u = (i) => {
|
|
16
|
+
const t = s(), o = $(i, t);
|
|
17
|
+
return o.shouldRender ? /* @__PURE__ */ r(e, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ r(f, { ...o.animationProps, children: /* @__PURE__ */ m(
|
|
18
|
+
e,
|
|
15
19
|
{
|
|
16
20
|
$flexDirection: "row",
|
|
17
21
|
$alignItems: "center",
|
|
@@ -22,12 +26,12 @@ const d = (e) => {
|
|
|
22
26
|
$flexGapX: 0.25,
|
|
23
27
|
$position: "relative",
|
|
24
28
|
children: [
|
|
25
|
-
/* @__PURE__ */
|
|
26
|
-
|
|
29
|
+
/* @__PURE__ */ r(d, { $iconColor: o.clockColor, children: /* @__PURE__ */ r(n, {}) }),
|
|
30
|
+
o.canStartTimer ? /* @__PURE__ */ r(p, { ...o.timerProps }) : /* @__PURE__ */ r(a, { ...o.clockProps })
|
|
27
31
|
]
|
|
28
32
|
}
|
|
29
33
|
) }) }) : null;
|
|
30
|
-
}, w =
|
|
34
|
+
}, w = c(u);
|
|
31
35
|
export {
|
|
32
36
|
w as default
|
|
33
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"class-time.js","sources":["../../../../../src/features/ui/timers/class-time/class-time.tsx"],"sourcesContent":["import type { IClassTimeProps } from './class-time-types';\n\nimport { memo } from 'react';\n\nimport Clock2Icon from '../../../../assets/line-icons/icons/clock2';\nimport useVisibilityChange from '../../../hooks/use-visibility-change';\nimport FlexView from '../../layout/flex-view';\nimport Clock from '../clock/clock';\nimport Timer from '../timer/timer';\nimport ClassTimeAnimationWrapper from './class-time-animation-wrapper';\nimport {
|
|
1
|
+
{"version":3,"file":"class-time.js","sources":["../../../../../src/features/ui/timers/class-time/class-time.tsx"],"sourcesContent":["import type { TColorNames } from '../../types';\nimport type { IClassTimeProps } from './class-time-types';\n\nimport { memo } from 'react';\nimport styled from 'styled-components';\n\nimport Clock2Icon from '../../../../assets/line-icons/icons/clock2';\nimport useVisibilityChange from '../../../hooks/use-visibility-change';\nimport FlexView from '../../layout/flex-view';\nimport Clock from '../clock/clock';\nimport Timer from '../timer/timer';\nimport ClassTimeAnimationWrapper from './class-time-animation-wrapper';\nimport { useClassTimeLogic } from './use-class-time-logic';\n\nconst IconWrapper = styled(FlexView)<{ $iconColor: TColorNames }>`\n svg {\n color: ${props => props.theme.colors[props.$iconColor]};\n }\n`;\n\nconst ClassTime = (props: IClassTimeProps) => {\n const isTabActive = useVisibilityChange();\n\n const logic = useClassTimeLogic(props, isTabActive);\n\n if (!logic.shouldRender) {\n return null;\n }\n\n return (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n <ClassTimeAnimationWrapper {...logic.animationProps}>\n <FlexView\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $background=\"GREY_1\"\n $borderRadiusX={1.25}\n $gutterX={0.5}\n $gapX={0.25}\n $flexGapX={0.25}\n $position=\"relative\"\n >\n <IconWrapper $iconColor={logic.clockColor}>\n <Clock2Icon />\n </IconWrapper>\n {logic.canStartTimer ? <Timer {...logic.timerProps} /> : <Clock {...logic.clockProps} />}\n </FlexView>\n </ClassTimeAnimationWrapper>\n </FlexView>\n );\n};\n\nexport default memo(ClassTime);\n"],"names":["IconWrapper","styled","FlexView","props","ClassTime","isTabActive","useVisibilityChange","logic","useClassTimeLogic","jsx","ClassTimeAnimationWrapper","jsxs","Clock2Icon","Timer","Clock","classTime","memo"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAcC,EAAOC,CAAQ;AAAA;AAAA,aAEtB,OAASC,EAAM,MAAM,OAAOA,EAAM,UAAU,CAAC;AAAA;AAAA,GAIpDC,IAAY,CAACD,MAA2B;AAC5C,QAAME,IAAcC,KAEdC,IAAQC,EAAkBL,GAAOE,CAAW;AAE9C,SAACE,EAAM,eAKT,gBAAAE,EAACP,GAAS,EAAA,gBAAe,OAAM,aAAY,UACzC,UAAC,gBAAAO,EAAAC,GAAA,EAA2B,GAAGH,EAAM,gBACnC,UAAA,gBAAAI;AAAA,IAACT;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,aAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAO,EAACT,KAAY,YAAYO,EAAM,YAC7B,UAAA,gBAAAE,EAACG,IAAW,CAAA,GACd;AAAA,QACCL,EAAM,gBAAiB,gBAAAE,EAAAI,GAAA,EAAO,GAAGN,EAAM,YAAY,IAAM,gBAAAE,EAAAK,GAAA,EAAO,GAAGP,EAAM,WAAY,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAE1F,CAAA,EACF,CAAA,IAtBO;AAwBX,GAEeQ,IAAAC,EAAKZ,CAAS;"}
|
|
@@ -1,26 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
color: ${(t) => t.theme.colors[t.$iconColor]};
|
|
6
|
-
}
|
|
7
|
-
`, o = 60 * 10, r = 60 * 5, _ = {
|
|
8
|
-
LAST_TEN: o + 2,
|
|
9
|
-
LAST_FIVE: r + 2
|
|
10
|
-
}, I = 2e3, L = 1500, A = [
|
|
1
|
+
const T = 600, t = 300, E = {
|
|
2
|
+
LAST_TEN: 602,
|
|
3
|
+
LAST_FIVE: 302
|
|
4
|
+
}, I = 2e3, s = 1500, _ = [
|
|
11
5
|
{
|
|
12
6
|
name: "ALERT",
|
|
13
7
|
url: "https://static.qumath.in/static/intel-student/cmpress/alert.mp3"
|
|
14
8
|
}
|
|
15
|
-
]
|
|
9
|
+
];
|
|
16
10
|
export {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
I as TIME_LEFT_IDLE,
|
|
24
|
-
l as getClockColor
|
|
11
|
+
_ as ALERT_AUDIO_LIST,
|
|
12
|
+
E as ANIMATION_TIME,
|
|
13
|
+
s as EXTEND_IDLE,
|
|
14
|
+
t as LAST_FIVE,
|
|
15
|
+
T as START_TIMER,
|
|
16
|
+
I as TIME_LEFT_IDLE
|
|
25
17
|
};
|
|
26
18
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../../src/features/ui/timers/class-time/constants.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../../src/features/ui/timers/class-time/constants.ts"],"sourcesContent":["const START_TIMER = 60 * 10; // 10 minutes\nconst LAST_FIVE = 60 * 5; // 5 minutes\nconst ANIMATION_TIME = {\n LAST_TEN: START_TIMER + 2,\n LAST_FIVE: LAST_FIVE + 2,\n};\n\nconst TIME_LEFT_IDLE = 2000;\nconst EXTEND_IDLE = 1500;\n\nexport const ALERT_AUDIO_LIST = [\n {\n name: 'ALERT',\n url: 'https://static.qumath.in/static/intel-student/cmpress/alert.mp3',\n },\n];\n\nexport { ANIMATION_TIME, START_TIMER, LAST_FIVE, TIME_LEFT_IDLE, EXTEND_IDLE };\n"],"names":["START_TIMER","LAST_FIVE","ANIMATION_TIME","TIME_LEFT_IDLE","EXTEND_IDLE","ALERT_AUDIO_LIST"],"mappings":"AAAA,MAAMA,IAAc,KACdC,IAAY,KACZC,IAAiB;AAAA,EACrB,UAAU;AAAA,EACV,WAAW;AACb,GAEMC,IAAiB,KACjBC,IAAc,MAEPC,IAAmB;AAAA,EAC9B;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;"}
|
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { LAST_FIVE as
|
|
3
|
-
const
|
|
1
|
+
import { useState as g, useMemo as M, useCallback as f, useEffect as C } from "react";
|
|
2
|
+
import { LAST_FIVE as _, ANIMATION_TIME as d, START_TIMER as h } from "./constants.js";
|
|
3
|
+
const N = ({ remainingTime: r, extendedTime: n }) => r <= _ ? "ORANGE_3" : r <= h || n ? "YELLOW_3" : "BLACK_3", W = (r, n) => {
|
|
4
4
|
const {
|
|
5
|
-
classDuration:
|
|
6
|
-
classStartedTime:
|
|
5
|
+
classDuration: t,
|
|
6
|
+
classStartedTime: a,
|
|
7
7
|
extendedTime: o,
|
|
8
|
-
ongoing:
|
|
9
|
-
onComplete:
|
|
10
|
-
onExtendClass:
|
|
11
|
-
onExtendedTimeStart:
|
|
12
|
-
showExtendIcon:
|
|
13
|
-
} =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
ongoing: L,
|
|
9
|
+
onComplete: s,
|
|
10
|
+
onExtendClass: w,
|
|
11
|
+
onExtendedTimeStart: c,
|
|
12
|
+
showExtendIcon: I = !1
|
|
13
|
+
} = r, [i, m] = g(!1), l = (+/* @__PURE__ */ new Date() - +a) / 1e3, e = Math.floor(t - l), T = !!(o && e <= o * 60), E = !!(l >= t - h || o), p = +/* @__PURE__ */ new Date() / 1e3 >= +a / 1e3 + t, x = M(
|
|
14
|
+
() => N({ remainingTime: e, extendedTime: o || 0 }),
|
|
15
|
+
[e, o]
|
|
16
|
+
), u = f(() => {
|
|
17
|
+
c == null || c();
|
|
18
|
+
}, [c]), S = f(() => {
|
|
19
|
+
m(!0);
|
|
17
20
|
}, []);
|
|
18
21
|
C(() => {
|
|
19
|
-
|
|
20
|
-
}, [
|
|
21
|
-
|
|
22
|
-
}, [
|
|
23
|
-
const
|
|
24
|
-
endTime:
|
|
25
|
-
onComplete:
|
|
26
|
-
reminder:
|
|
22
|
+
n && p && (s == null || s());
|
|
23
|
+
}, [n, p, s]), C(() => {
|
|
24
|
+
n && T && u();
|
|
25
|
+
}, [T, u, n]);
|
|
26
|
+
const A = {
|
|
27
|
+
endTime: t + +a / 1e3,
|
|
28
|
+
onComplete: s,
|
|
29
|
+
reminder: d.LAST_FIVE,
|
|
27
30
|
onReminder: S
|
|
28
|
-
},
|
|
29
|
-
completionTime:
|
|
31
|
+
}, O = {
|
|
32
|
+
completionTime: t - d.LAST_TEN,
|
|
30
33
|
onComplete: S,
|
|
31
|
-
startedOn: new Date(
|
|
32
|
-
},
|
|
34
|
+
startedOn: new Date(a)
|
|
35
|
+
}, R = {
|
|
33
36
|
canShowWarning: i,
|
|
34
|
-
setCanShowWarning:
|
|
35
|
-
remainingTime:
|
|
36
|
-
onExtendClass:
|
|
37
|
-
showExtendIcon: !o &&
|
|
38
|
-
showRipple: !i &&
|
|
39
|
-
rippleColor:
|
|
40
|
-
showExtendOverlay:
|
|
37
|
+
setCanShowWarning: m,
|
|
38
|
+
remainingTime: e,
|
|
39
|
+
onExtendClass: w,
|
|
40
|
+
showExtendIcon: !o && I,
|
|
41
|
+
showRipple: !i && E,
|
|
42
|
+
rippleColor: e <= _ ? "ORANGE_3" : "YELLOW_3",
|
|
43
|
+
showExtendOverlay: e <= d.LAST_FIVE && i
|
|
41
44
|
};
|
|
42
45
|
return {
|
|
43
|
-
shouldRender: !!(
|
|
44
|
-
canStartTimer:
|
|
45
|
-
clockColor:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
timerProps: x,
|
|
50
|
-
clockProps: _,
|
|
51
|
-
animationProps: g
|
|
46
|
+
shouldRender: !!(L && !(l >= 0 && e <= 0)),
|
|
47
|
+
canStartTimer: E,
|
|
48
|
+
clockColor: x,
|
|
49
|
+
timerProps: A,
|
|
50
|
+
clockProps: O,
|
|
51
|
+
animationProps: R
|
|
52
52
|
};
|
|
53
53
|
};
|
|
54
54
|
export {
|
|
55
|
-
|
|
55
|
+
W as useClassTimeLogic
|
|
56
56
|
};
|
|
57
57
|
//# sourceMappingURL=use-class-time-logic.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-class-time-logic.js","sources":["../../../../../src/features/ui/timers/class-time/use-class-time-logic.ts"],"sourcesContent":["import type { IClassTimeProps } from './class-time-types';\n\nimport { useState, useCallback, useEffect } from 'react';\n\nimport { ANIMATION_TIME,
|
|
1
|
+
{"version":3,"file":"use-class-time-logic.js","sources":["../../../../../src/features/ui/timers/class-time/use-class-time-logic.ts"],"sourcesContent":["import type { TColorNames } from '../../types';\nimport type { IClassTimeProps } from './class-time-types';\n\nimport { useState, useCallback, useEffect, useMemo } from 'react';\n\nimport { ANIMATION_TIME, LAST_FIVE, START_TIMER } from './constants';\n\ninterface IClockColorParams {\n remainingTime: number;\n extendedTime: number;\n}\n\nconst getClockColor = ({ remainingTime, extendedTime }: IClockColorParams): TColorNames => {\n if (remainingTime <= LAST_FIVE) return 'ORANGE_3';\n\n if (remainingTime <= START_TIMER || extendedTime) return 'YELLOW_3';\n\n return 'BLACK_3';\n};\n\nexport const useClassTimeLogic = (props: IClassTimeProps, isTabActive: boolean) => {\n const {\n classDuration,\n classStartedTime,\n extendedTime,\n ongoing,\n onComplete,\n onExtendClass,\n onExtendedTimeStart,\n showExtendIcon = false,\n } = props;\n const [canShowWarning, setCanShowWarning] = useState(false);\n\n const elapsedTime = (+new Date() - +classStartedTime) / 1000;\n const remainingTime = Math.floor(classDuration - elapsedTime);\n const extendedTimeStarted = !!(extendedTime && remainingTime <= extendedTime * 60);\n\n const canStartTimer = !!(elapsedTime >= classDuration - START_TIMER || !!extendedTime); // LAST_TEN_MINUTES || LAST_FIVEMINUTES_REMAINING + EXENDED_TIME\n const isClassCompleted = +new Date() / 1000 >= +classStartedTime / 1000 + classDuration;\n const clockColor = useMemo(\n () => getClockColor({ remainingTime, extendedTime: extendedTime || 0 }),\n [remainingTime, extendedTime],\n );\n const handleStartExtendedTime = useCallback(() => {\n onExtendedTimeStart?.();\n }, [onExtendedTimeStart]);\n\n const handleStartAnimation = useCallback(() => {\n setCanShowWarning(true);\n }, []);\n\n useEffect(() => {\n if (isTabActive && isClassCompleted) {\n onComplete?.();\n }\n }, [isTabActive, isClassCompleted, onComplete]);\n\n useEffect(() => {\n if (isTabActive && extendedTimeStarted) {\n handleStartExtendedTime();\n }\n }, [extendedTimeStarted, handleStartExtendedTime, isTabActive]);\n\n const timerProps = {\n endTime: classDuration + +classStartedTime / 1000,\n onComplete,\n reminder: ANIMATION_TIME.LAST_FIVE,\n onReminder: handleStartAnimation,\n };\n\n const clockProps = {\n completionTime: classDuration - ANIMATION_TIME.LAST_TEN,\n onComplete: handleStartAnimation,\n startedOn: new Date(classStartedTime),\n };\n\n const animationProps = {\n canShowWarning,\n setCanShowWarning,\n remainingTime,\n onExtendClass,\n showExtendIcon: !extendedTime && showExtendIcon,\n showRipple: !canShowWarning && canStartTimer,\n rippleColor: (remainingTime <= LAST_FIVE ? 'ORANGE_3' : 'YELLOW_3') as 'ORANGE_3' | 'YELLOW_3',\n showExtendOverlay: remainingTime <= ANIMATION_TIME.LAST_FIVE && canShowWarning,\n };\n\n return {\n shouldRender: !!(ongoing && !(elapsedTime >= 0 && remainingTime <= 0)),\n canStartTimer,\n clockColor,\n timerProps,\n clockProps,\n animationProps,\n };\n};\n"],"names":["getClockColor","remainingTime","extendedTime","LAST_FIVE","START_TIMER","useClassTimeLogic","props","isTabActive","classDuration","classStartedTime","ongoing","onComplete","onExtendClass","onExtendedTimeStart","showExtendIcon","canShowWarning","setCanShowWarning","useState","elapsedTime","extendedTimeStarted","canStartTimer","isClassCompleted","clockColor","useMemo","handleStartExtendedTime","useCallback","handleStartAnimation","useEffect","timerProps","ANIMATION_TIME","clockProps","animationProps"],"mappings":";;AAYA,MAAMA,IAAgB,CAAC,EAAE,eAAAC,GAAe,cAAAC,QAClCD,KAAiBE,IAAkB,aAEnCF,KAAiBG,KAAeF,IAAqB,aAElD,WAGIG,IAAoB,CAACC,GAAwBC,MAAyB;AAC3E,QAAA;AAAA,IACJ,eAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAP;AAAA,IACA,SAAAQ;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,EACf,IAAAR,GACE,CAACS,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,KAAe,CAAC,oBAAI,KAAK,IAAI,CAACT,KAAoB,KAClDR,IAAgB,KAAK,MAAMO,IAAgBU,CAAW,GACtDC,IAAsB,CAAC,EAAEjB,KAAgBD,KAAiBC,IAAe,KAEzEkB,IAAgB,CAAC,EAAEF,KAAeV,IAAgBJ,KAAiBF,IACnEmB,IAAmB,CAAK,oBAAA,SAAS,OAAQ,CAACZ,IAAmB,MAAOD,GACpEc,IAAaC;AAAA,IACjB,MAAMvB,EAAc,EAAE,eAAAC,GAAe,cAAcC,KAAgB,GAAG;AAAA,IACtE,CAACD,GAAeC,CAAY;AAAA,EAAA,GAExBsB,IAA0BC,EAAY,MAAM;AAC1B,IAAAZ,KAAA,QAAAA;AAAA,EAAA,GACrB,CAACA,CAAmB,CAAC,GAElBa,IAAuBD,EAAY,MAAM;AAC7C,IAAAT,EAAkB,EAAI;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,EAAAW,EAAU,MAAM;AACd,IAAIpB,KAAec,MACJV,KAAA,QAAAA;AAAA,EAEd,GAAA,CAACJ,GAAac,GAAkBV,CAAU,CAAC,GAE9CgB,EAAU,MAAM;AACd,IAAIpB,KAAeY,KACOK;EAEzB,GAAA,CAACL,GAAqBK,GAAyBjB,CAAW,CAAC;AAE9D,QAAMqB,IAAa;AAAA,IACjB,SAASpB,IAAgB,CAACC,IAAmB;AAAA,IAC7C,YAAAE;AAAA,IACA,UAAUkB,EAAe;AAAA,IACzB,YAAYH;AAAA,EAAA,GAGRI,IAAa;AAAA,IACjB,gBAAgBtB,IAAgBqB,EAAe;AAAA,IAC/C,YAAYH;AAAA,IACZ,WAAW,IAAI,KAAKjB,CAAgB;AAAA,EAAA,GAGhCsB,IAAiB;AAAA,IACrB,gBAAAhB;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAf;AAAA,IACA,eAAAW;AAAA,IACA,gBAAgB,CAACV,KAAgBY;AAAA,IACjC,YAAY,CAACC,KAAkBK;AAAA,IAC/B,aAAcnB,KAAiBE,IAAY,aAAa;AAAA,IACxD,mBAAmBF,KAAiB4B,EAAe,aAAad;AAAA,EAAA;AAG3D,SAAA;AAAA,IACL,cAAc,CAAC,EAAEL,KAAW,EAAEQ,KAAe,KAAKjB,KAAiB;AAAA,IACnE,eAAAmB;AAAA,IACA,YAAAE;AAAA,IACA,YAAAM;AAAA,IACA,YAAAE;AAAA,IACA,gBAAAC;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,66 +1,69 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import e from "styled-components";
|
|
3
3
|
import { ILLUSTRATIONS as f } from "../../../../assets/illustrations/illustrations.js";
|
|
4
4
|
import C from "../../../../assets/line-icons/icons/clock2.js";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
import t from "../../layout/flex-view.js";
|
|
6
|
+
import $ from "../../loader/reverse-circular-bar/reverse-circular-bar.js";
|
|
7
|
+
import h from "../timer/timer.js";
|
|
8
|
+
const w = e(t)`
|
|
9
|
+
svg {
|
|
10
|
+
color: ${(o) => o.theme.colors[o.$iconColor]};
|
|
11
|
+
}
|
|
12
|
+
`, u = e.div`
|
|
10
13
|
position: absolute;
|
|
11
14
|
left: 50%;
|
|
12
15
|
top: 54%;
|
|
13
16
|
transform: translate(-50%, -50%);
|
|
14
|
-
`, R =
|
|
17
|
+
`, R = e(t)`
|
|
15
18
|
position: relative;
|
|
16
|
-
`,
|
|
19
|
+
`, g = ({
|
|
17
20
|
hideDigits: o,
|
|
18
|
-
onTimerComplete:
|
|
19
|
-
timeRemaining:
|
|
20
|
-
duration:
|
|
21
|
-
textVariant:
|
|
22
|
-
textColor:
|
|
23
|
-
background:
|
|
24
|
-
iconColor:
|
|
21
|
+
onTimerComplete: s,
|
|
22
|
+
timeRemaining: i,
|
|
23
|
+
duration: n,
|
|
24
|
+
textVariant: a = "eyebrow1",
|
|
25
|
+
textColor: m = "BLACK",
|
|
26
|
+
background: c = "GREY_1",
|
|
27
|
+
iconColor: p = "BLACK",
|
|
25
28
|
renderAs: d = "circular-progressive-bar"
|
|
26
|
-
}) => /* @__PURE__ */
|
|
27
|
-
|
|
29
|
+
}) => /* @__PURE__ */ l(
|
|
30
|
+
t,
|
|
28
31
|
{
|
|
29
32
|
$flexDirection: "row",
|
|
30
33
|
$alignItems: "center",
|
|
31
|
-
$background:
|
|
34
|
+
$background: c,
|
|
32
35
|
$borderRadius: 18,
|
|
33
36
|
$width: "fit-content",
|
|
34
37
|
$gutter: o ? 4 : 8,
|
|
35
38
|
$gap: 4,
|
|
36
39
|
$flexGap: 4,
|
|
37
40
|
children: [
|
|
38
|
-
d === "circular-progressive-bar" &&
|
|
41
|
+
d === "circular-progressive-bar" && n ? /* @__PURE__ */ l(R, { children: [
|
|
39
42
|
/* @__PURE__ */ r("img", { src: f.CROSSHAIR_CIRCLE, width: 28, height: 28 }),
|
|
40
43
|
/* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
|
|
41
|
-
|
|
44
|
+
$,
|
|
42
45
|
{
|
|
43
|
-
timeRemaining:
|
|
44
|
-
duration:
|
|
45
|
-
color:
|
|
46
|
+
timeRemaining: i,
|
|
47
|
+
duration: n,
|
|
48
|
+
color: c === "GREEN_1" ? "GREEN_5" : "ORANGE_5",
|
|
46
49
|
width: 14,
|
|
47
50
|
height: 14
|
|
48
51
|
}
|
|
49
52
|
) })
|
|
50
|
-
] }) : /* @__PURE__ */ r(w, { $iconColor:
|
|
53
|
+
] }) : /* @__PURE__ */ r(w, { $iconColor: p, children: /* @__PURE__ */ r(C, {}) }),
|
|
51
54
|
!o && /* @__PURE__ */ r(
|
|
52
|
-
|
|
55
|
+
h,
|
|
53
56
|
{
|
|
54
|
-
endTime: +new Date(Date.now() +
|
|
55
|
-
onComplete:
|
|
56
|
-
textVariant:
|
|
57
|
-
textColor:
|
|
57
|
+
endTime: +new Date(Date.now() + i * 1e3) / 1e3,
|
|
58
|
+
onComplete: s,
|
|
59
|
+
textVariant: a,
|
|
60
|
+
textColor: m
|
|
58
61
|
}
|
|
59
62
|
)
|
|
60
63
|
]
|
|
61
64
|
}
|
|
62
|
-
),
|
|
65
|
+
), A = g;
|
|
63
66
|
export {
|
|
64
|
-
|
|
67
|
+
A as default
|
|
65
68
|
};
|
|
66
69
|
//# sourceMappingURL=countdown-timer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"countdown-timer.js","sources":["../../../../../src/features/ui/timers/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../../types';\nimport type { FC } from 'react';\n\nimport styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Clock2Icon from '../../../../assets/line-icons/icons/clock2';\nimport FlexView from '../../layout/flex-view';\nimport CircularProgressiveBar from '../../loader/reverse-circular-bar/reverse-circular-bar';\nimport
|
|
1
|
+
{"version":3,"file":"countdown-timer.js","sources":["../../../../../src/features/ui/timers/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import type { TColorNames, TTextVariants } from '../../types';\nimport type { FC } from 'react';\n\nimport styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Clock2Icon from '../../../../assets/line-icons/icons/clock2';\nimport FlexView from '../../layout/flex-view';\nimport CircularProgressiveBar from '../../loader/reverse-circular-bar/reverse-circular-bar';\nimport Timer from '../timer/timer';\n\ninterface ICountdownTimer {\n renderAs: 'circular-progressive-bar' | 'default';\n hideDigits: boolean;\n onTimerComplete?: () => void;\n timeRemaining: number;\n background: 'GREEN_1' | 'ORANGE_1' | 'GREY_1';\n duration?: number;\n textVariant?: TTextVariants;\n textColor?: TColorNames;\n iconColor?: 'YELLOW_3' | 'ORANGE_3' | 'BLACK' | 'WHITE';\n}\n\nconst IconWrapper = styled(FlexView)<{ $iconColor: TColorNames }>`\n svg {\n color: ${props => props.theme.colors[props.$iconColor]};\n }\n`;\n\nconst LoaderWrapper = styled.div`\n position: absolute;\n left: 50%;\n top: 54%;\n transform: translate(-50%, -50%);\n`;\n\nconst ImageWrapper = styled(FlexView)`\n position: relative;\n`;\n\nconst CountdownTimer: FC<ICountdownTimer> = ({\n hideDigits,\n onTimerComplete,\n timeRemaining,\n duration,\n textVariant = 'eyebrow1',\n textColor = 'BLACK',\n background = 'GREY_1',\n iconColor = 'BLACK',\n renderAs = 'circular-progressive-bar',\n}) => {\n return (\n <FlexView\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $background={background}\n $borderRadius={18}\n $width=\"fit-content\"\n $gutter={hideDigits ? 4 : 8}\n $gap={4}\n $flexGap={4}\n >\n {renderAs === 'circular-progressive-bar' && duration ? (\n <ImageWrapper>\n <img src={ILLUSTRATIONS.CROSSHAIR_CIRCLE} width={28} height={28} />\n <LoaderWrapper>\n <CircularProgressiveBar\n timeRemaining={timeRemaining}\n duration={duration}\n color={background === 'GREEN_1' ? 'GREEN_5' : 'ORANGE_5'}\n width={14}\n height={14}\n />\n </LoaderWrapper>\n </ImageWrapper>\n ) : (\n <IconWrapper $iconColor={iconColor}>\n <Clock2Icon />\n </IconWrapper>\n )}\n {!hideDigits && (\n <Timer\n endTime={+new Date(Date.now() + timeRemaining * 1000) / 1000}\n onComplete={onTimerComplete}\n textVariant={textVariant}\n textColor={textColor}\n />\n )}\n </FlexView>\n );\n};\n\nexport default CountdownTimer;\n"],"names":["IconWrapper","styled","FlexView","props","LoaderWrapper","ImageWrapper","CountdownTimer","hideDigits","onTimerComplete","timeRemaining","duration","textVariant","textColor","background","iconColor","renderAs","jsxs","jsx","ILLUSTRATIONS","CircularProgressiveBar","Clock2Icon","Timer","CountdownTimer$1"],"mappings":";;;;;;;AAuBA,MAAMA,IAAcC,EAAOC,CAAQ;AAAA;AAAA,aAEtB,OAASC,EAAM,MAAM,OAAOA,EAAM,UAAU,CAAC;AAAA;AAAA,GAIpDC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBI,IAAeJ,EAAOC,CAAQ;AAAA;AAAA,GAI9BI,IAAsC,CAAC;AAAA,EAC3C,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AACb,MAEI,gBAAAC;AAAA,EAACd;AAAA,EAAA;AAAA,IACC,gBAAe;AAAA,IACf,aAAY;AAAA,IACZ,aAAaW;AAAA,IACb,eAAe;AAAA,IACf,QAAO;AAAA,IACP,SAASN,IAAa,IAAI;AAAA,IAC1B,MAAM;AAAA,IACN,UAAU;AAAA,IAET,UAAA;AAAA,MAAaQ,MAAA,8BAA8BL,IAC1C,gBAAAM,EAACX,GACC,EAAA,UAAA;AAAA,QAAA,gBAAAY,EAAC,SAAI,KAAKC,EAAc,kBAAkB,OAAO,IAAI,QAAQ,IAAI;AAAA,0BAChEd,GACC,EAAA,UAAA,gBAAAa;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,eAAAV;AAAA,YACA,UAAAC;AAAA,YACA,OAAOG,MAAe,YAAY,YAAY;AAAA,YAC9C,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QAAA,GAEZ;AAAA,MAAA,EAAA,CACF,IAEC,gBAAAI,EAAAjB,GAAA,EAAY,YAAYc,GACvB,UAAA,gBAAAG,EAACG,KAAW,EACd,CAAA;AAAA,MAED,CAACb,KACA,gBAAAU;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAS,CAAC,IAAI,KAAK,KAAK,IAAI,IAAIZ,IAAgB,GAAI,IAAI;AAAA,UACxD,YAAYD;AAAA,UACZ,aAAAG;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAAA,GAMRU,IAAehB;"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { addYears as
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
return
|
|
5
|
-
},
|
|
6
|
-
let
|
|
7
|
-
return { promise: new Promise((
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
}), timerId:
|
|
12
|
-
},
|
|
13
|
-
const
|
|
14
|
-
return Math.floor(
|
|
1
|
+
import { addYears as s } from "../../node_modules/date-fns/addYears.js";
|
|
2
|
+
const i = (r) => Array.isArray(r) && r.length > 0, c = (r) => {
|
|
3
|
+
const t = (a) => a.toString().padStart(2, "0"), o = Math.floor(r / 3600), e = Math.floor(r % 3600 / 60), n = r % 60;
|
|
4
|
+
return o > 0 ? `${t(o)}:${t(e)}:${t(n)}` : `${t(e)}:${t(n)}`;
|
|
5
|
+
}, l = (r) => {
|
|
6
|
+
let t = null;
|
|
7
|
+
return { promise: new Promise((e) => {
|
|
8
|
+
t = setTimeout(() => {
|
|
9
|
+
e("resolved");
|
|
10
|
+
}, r);
|
|
11
|
+
}), timerId: t };
|
|
12
|
+
}, p = () => {
|
|
13
|
+
const t = s(/* @__PURE__ */ new Date(), 1);
|
|
14
|
+
return Math.floor(t.getTime() / 1e3);
|
|
15
15
|
};
|
|
16
16
|
export {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
l as delay,
|
|
18
|
+
p as epochTimestampAfterOneYear,
|
|
19
|
+
c as formatTimeInHHMMSS,
|
|
20
|
+
i as isNonEmptyArray
|
|
21
21
|
};
|
|
22
22
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/features/utils/utils.ts"],"sourcesContent":["import { addYears } from 'date-fns';\n\nconst isNonEmptyArray = (array: unknown) => {\n return Array.isArray(array) && array.length > 0;\n};\n\n// format the time in HH:MM:SS\nconst formatTimeInHHMMSS = (seconds: number
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/features/utils/utils.ts"],"sourcesContent":["import { addYears } from 'date-fns';\n\nconst isNonEmptyArray = (array: unknown) => {\n return Array.isArray(array) && array.length > 0;\n};\n\n// format the time in HH:MM:SS\nconst formatTimeInHHMMSS = (seconds: number) => {\n const pad = (num: number) => num.toString().padStart(2, '0');\n\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = seconds % 60;\n\n return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;\n};\n\nconst delay = (delayInMs: number) => {\n let timerId: ReturnType<typeof setTimeout> | null = null;\n const promise = new Promise(res => {\n timerId = setTimeout(() => {\n res('resolved');\n }, delayInMs);\n });\n\n return { promise, timerId };\n};\n\nconst epochTimestampAfterOneYear = () => {\n const today = new Date();\n const oneYearLater = addYears(today, 1);\n\n return Math.floor(oneYearLater.getTime() / 1000);\n};\n\nexport { isNonEmptyArray, formatTimeInHHMMSS, delay, epochTimestampAfterOneYear };\n"],"names":["isNonEmptyArray","array","formatTimeInHHMMSS","seconds","pad","num","h","m","s","delay","delayInMs","timerId","res","epochTimestampAfterOneYear","oneYearLater","addYears"],"mappings":";AAEM,MAAAA,IAAkB,CAACC,MAChB,MAAM,QAAQA,CAAK,KAAKA,EAAM,SAAS,GAI1CC,IAAqB,CAACC,MAAoB;AACxC,QAAAC,IAAM,CAACC,MAAgBA,EAAI,WAAW,SAAS,GAAG,GAAG,GAErDC,IAAI,KAAK,MAAMH,IAAU,IAAI,GAC7BI,IAAI,KAAK,MAAOJ,IAAU,OAAQ,EAAE,GACpCK,IAAIL,IAAU;AAEb,SAAAG,IAAI,IAAI,GAAGF,EAAIE,CAAC,CAAC,IAAIF,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC,KAAK,GAAGJ,EAAIG,CAAC,CAAC,IAAIH,EAAII,CAAC,CAAC;AACtE,GAEMC,IAAQ,CAACC,MAAsB;AACnC,MAAIC,IAAgD;AAO7C,SAAA,EAAE,SANO,IAAI,QAAQ,CAAOC,MAAA;AACjC,IAAAD,IAAU,WAAW,MAAM;AACzB,MAAAC,EAAI,UAAU;AAAA,OACbF,CAAS;AAAA,EAAA,CACb,GAEiB,SAAAC;AACpB,GAEME,IAA6B,MAAM;AAEjC,QAAAC,IAAeC,sBADH,QACmB,CAAC;AAEtC,SAAO,KAAK,MAAMD,EAAa,YAAY,GAAI;AACjD;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -673,7 +673,7 @@ declare interface FlexViewProps {
|
|
|
673
673
|
$flex?: number;
|
|
674
674
|
}
|
|
675
675
|
|
|
676
|
-
export declare const formatTimeInHHMMSS: (seconds: number
|
|
676
|
+
export declare const formatTimeInHHMMSS: (seconds: number) => string;
|
|
677
677
|
|
|
678
678
|
export declare interface Game extends BaseProject {
|
|
679
679
|
isPlayed: boolean;
|