@cuemath/leap 3.3.24-as4 → 3.3.24-as5
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/animate.js +49 -51
- package/dist/features/ui/timers/class-time/animate.js.map +1 -1
- package/dist/features/ui/timers/class-time/class-time-animation-wrapper.js +28 -0
- package/dist/features/ui/timers/class-time/class-time-animation-wrapper.js.map +1 -0
- package/dist/features/ui/timers/class-time/class-time.js +11 -11
- package/dist/features/ui/timers/class-time/class-time.js.map +1 -1
- package/dist/features/ui/timers/class-time/use-class-time-logic.js +65 -85
- package/dist/features/ui/timers/class-time/use-class-time-logic.js.map +1 -1
- package/package.json +1 -1
- package/dist/features/ui/timers/class-time/class-time-animations.js +0 -28
- package/dist/features/ui/timers/class-time/class-time-animations.js.map +0 -1
|
@@ -1,59 +1,57 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
1
|
+
import { jsxs as u, Fragment as L, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { memo as g, useState as S, useRef as b, useCallback as s, useEffect as T } from "react";
|
|
3
3
|
import c from "styled-components";
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
4
|
+
import w from "../../../../assets/line-icons/icons/plus.js";
|
|
5
|
+
import N from "../../../hooks/use-audio-player.js";
|
|
6
|
+
import k from "../../../hooks/use-previous.js";
|
|
7
|
+
import R from "../../buttons/clickable/clickable.js";
|
|
8
8
|
import m from "../../layout/flex-view.js";
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { ANIMATION_TIME as
|
|
12
|
-
const
|
|
9
|
+
import l from "../../text/text.js";
|
|
10
|
+
import f from "./animations/open-close.js";
|
|
11
|
+
import { ANIMATION_TIME as a, TIME_LEFT_IDLE as O, LAST_FIVE as W, START_TIMER as X, EXTEND_IDLE as D, ALERT_AUDIO_LIST as F } from "./constants.js";
|
|
12
|
+
const y = c(m)`
|
|
13
13
|
position: absolute;
|
|
14
14
|
top: -8px;
|
|
15
15
|
right: 8px;
|
|
16
16
|
z-index: ${({ theme: o }) => o.zIndex.EXTEND_CLASS_ANIMATION_3};
|
|
17
|
-
`,
|
|
17
|
+
`, M = c(l)`
|
|
18
18
|
padding-left: 4px;
|
|
19
19
|
padding-right: 8px;
|
|
20
|
-
`,
|
|
20
|
+
`, z = c(m)`
|
|
21
21
|
flex-flow: nowrap;
|
|
22
22
|
z-index: ${({ theme: o }) => o.zIndex.EXTEND_CLASS_ANIMATION_2};
|
|
23
|
-
`,
|
|
23
|
+
`, V = (o) => {
|
|
24
24
|
const {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
onExtendClass:
|
|
25
|
+
canShowWarning: n,
|
|
26
|
+
setCanShowWarning: d,
|
|
27
|
+
remainingTime: t,
|
|
28
|
+
onExtendClass: E = () => {
|
|
29
29
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
showExtendIcon: _ = !1
|
|
33
|
-
} = o, [$, n] = N(!1), i = w(null), A = O(t), u = D(V), r = Math.floor(C - (+/* @__PURE__ */ new Date() - I) / 1e3), h = _ && r <= s.LAST_FIVE, L = l(() => {
|
|
30
|
+
showExtendIcon: I = !1
|
|
31
|
+
} = o, [h, i] = S(!1), r = b(null), p = k(n), A = N(F), x = I && t <= a.LAST_FIVE, C = s(() => {
|
|
34
32
|
d(!1);
|
|
35
|
-
}, [d]),
|
|
36
|
-
|
|
37
|
-
}, [
|
|
38
|
-
|
|
39
|
-
}, [
|
|
40
|
-
return
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
}, [d]), _ = s(() => {
|
|
34
|
+
A("ALERT");
|
|
35
|
+
}, [A]), $ = s(() => {
|
|
36
|
+
i(!1);
|
|
37
|
+
}, [i]);
|
|
38
|
+
return T(() => {
|
|
39
|
+
n && !p && (r.current = setTimeout(() => {
|
|
40
|
+
i(!0);
|
|
43
41
|
}, 1e3));
|
|
44
|
-
}, [
|
|
45
|
-
|
|
46
|
-
}, []), /* @__PURE__ */
|
|
42
|
+
}, [n, p]), T(() => () => {
|
|
43
|
+
r.current && clearTimeout(r.current);
|
|
44
|
+
}, []), /* @__PURE__ */ u(L, { children: [
|
|
47
45
|
/* @__PURE__ */ e(
|
|
48
|
-
|
|
46
|
+
f,
|
|
49
47
|
{
|
|
50
|
-
background:
|
|
51
|
-
onAnimationComplete:
|
|
52
|
-
onOpenAnimationComplete:
|
|
53
|
-
visible:
|
|
54
|
-
idleTime:
|
|
55
|
-
children: /* @__PURE__ */
|
|
56
|
-
|
|
48
|
+
background: t <= a.LAST_FIVE ? "ORANGE_4" : "YELLOW_3",
|
|
49
|
+
onAnimationComplete: C,
|
|
50
|
+
onOpenAnimationComplete: _,
|
|
51
|
+
visible: n,
|
|
52
|
+
idleTime: O,
|
|
53
|
+
children: /* @__PURE__ */ u(
|
|
54
|
+
z,
|
|
57
55
|
{
|
|
58
56
|
$flexDirection: "row",
|
|
59
57
|
$alignItems: "center",
|
|
@@ -64,28 +62,28 @@ const W = c(m)`
|
|
|
64
62
|
$gapX: 0.35,
|
|
65
63
|
$flexGapX: 0.25,
|
|
66
64
|
children: [
|
|
67
|
-
/* @__PURE__ */ e(
|
|
68
|
-
/* @__PURE__ */ e(
|
|
65
|
+
/* @__PURE__ */ e(l, { $renderAs: "ac3-black", children: t <= a.LAST_FIVE ? `0${W / 60}:00` : `${X / 60}:00` }),
|
|
66
|
+
/* @__PURE__ */ e(l, { $renderAs: "ac3-black", children: "Left" })
|
|
69
67
|
]
|
|
70
68
|
}
|
|
71
69
|
)
|
|
72
70
|
}
|
|
73
71
|
),
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
x && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
|
|
73
|
+
f,
|
|
76
74
|
{
|
|
77
|
-
onAnimationComplete:
|
|
75
|
+
onAnimationComplete: $,
|
|
78
76
|
background: "BLACK",
|
|
79
|
-
Icon: /* @__PURE__ */ e(
|
|
77
|
+
Icon: /* @__PURE__ */ e(R, { label: "Extend Class", onClick: E, children: /* @__PURE__ */ e(m, { $background: "WHITE", $borderRadiusX: 1.25, $borderColor: "BLACK_3", children: /* @__PURE__ */ e(w, { width: 16, height: 16 }) }) }),
|
|
80
78
|
size: 24,
|
|
81
|
-
visible:
|
|
82
|
-
idleTime:
|
|
83
|
-
children: /* @__PURE__ */ e(
|
|
79
|
+
visible: h,
|
|
80
|
+
idleTime: D,
|
|
81
|
+
children: /* @__PURE__ */ e(M, { $color: "WHITE", $renderAs: "body3", children: "Extend Class" })
|
|
84
82
|
}
|
|
85
83
|
) })
|
|
86
84
|
] });
|
|
87
|
-
},
|
|
85
|
+
}, Q = g(V);
|
|
88
86
|
export {
|
|
89
|
-
|
|
87
|
+
Q as default
|
|
90
88
|
};
|
|
91
89
|
//# sourceMappingURL=animate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate.js","sources":["../../../../../src/features/ui/timers/class-time/animate.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef, memo } from 'react';\nimport styled from 'styled-components';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport useAudioPlayer from '../../../hooks/use-audio-player';\nimport usePrevious from '../../../hooks/use-previous';\nimport Clickable from '../../buttons/clickable/clickable';\nimport FlexView from '../../layout/flex-view';\nimport Text from '../../text/text';\nimport OpenCloseAnimation from './animations/open-close';\nimport {\n ALERT_AUDIO_LIST,\n ANIMATION_TIME,\n EXTEND_IDLE,\n LAST_FIVE,\n START_TIMER,\n TIME_LEFT_IDLE,\n} from './constants';\n\nconst IconWrapper = styled(FlexView)`\n position: absolute;\n top: -8px;\n right: 8px;\n z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_3};\n`;\n\nconst StyledText = styled(Text)`\n padding-left: 4px;\n padding-right: 8px;\n`;\n\nconst NoWrapRow = styled(FlexView)`\n flex-flow: nowrap;\n z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_2};\n`;\n\ninterface AnimateProps {\n
|
|
1
|
+
{"version":3,"file":"animate.js","sources":["../../../../../src/features/ui/timers/class-time/animate.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef, memo } from 'react';\nimport styled from 'styled-components';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport useAudioPlayer from '../../../hooks/use-audio-player';\nimport usePrevious from '../../../hooks/use-previous';\nimport Clickable from '../../buttons/clickable/clickable';\nimport FlexView from '../../layout/flex-view';\nimport Text from '../../text/text';\nimport OpenCloseAnimation from './animations/open-close';\nimport {\n ALERT_AUDIO_LIST,\n ANIMATION_TIME,\n EXTEND_IDLE,\n LAST_FIVE,\n START_TIMER,\n TIME_LEFT_IDLE,\n} from './constants';\n\nconst IconWrapper = styled(FlexView)`\n position: absolute;\n top: -8px;\n right: 8px;\n z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_3};\n`;\n\nconst StyledText = styled(Text)`\n padding-left: 4px;\n padding-right: 8px;\n`;\n\nconst NoWrapRow = styled(FlexView)`\n flex-flow: nowrap;\n z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_2};\n`;\n\ninterface AnimateProps {\n canShowWarning: boolean;\n setCanShowWarning: (value: boolean) => void;\n remainingTime: number;\n onExtendClass?: () => void;\n showExtendIcon?: boolean;\n}\n\nconst Animate = (props: AnimateProps) => {\n const {\n canShowWarning,\n setCanShowWarning,\n remainingTime,\n onExtendClass = () => {},\n showExtendIcon = false,\n } = props;\n const [animateTip, setAnimateTip] = useState(false);\n const timer = useRef<NodeJS.Timeout | null>(null);\n const previousCanShowWarning = usePrevious(canShowWarning);\n const playNotifSound = useAudioPlayer(ALERT_AUDIO_LIST);\n\n const showIcon = showExtendIcon && remainingTime <= ANIMATION_TIME.LAST_FIVE;\n\n const onClockAnimationComplete = useCallback(() => {\n setCanShowWarning(false);\n }, [setCanShowWarning]);\n\n const onOpenAnimationComplete = useCallback(() => {\n playNotifSound('ALERT');\n }, [playNotifSound]);\n\n const onAnimateComplete = useCallback(() => {\n setAnimateTip(false);\n }, [setAnimateTip]);\n\n useEffect(() => {\n if (canShowWarning && !previousCanShowWarning) {\n timer.current = setTimeout(() => {\n setAnimateTip(true);\n }, 1000);\n }\n }, [canShowWarning, previousCanShowWarning]);\n\n useEffect(() => {\n return () => {\n if (timer.current) {\n clearTimeout(timer.current);\n }\n };\n }, []);\n\n return (\n <>\n <OpenCloseAnimation\n background={remainingTime <= ANIMATION_TIME.LAST_FIVE ? 'ORANGE_4' : 'YELLOW_3'}\n onAnimationComplete={onClockAnimationComplete}\n onOpenAnimationComplete={onOpenAnimationComplete}\n visible={canShowWarning}\n idleTime={TIME_LEFT_IDLE}\n >\n <NoWrapRow\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $width=\"100%\"\n $justifyContent=\"space-around\"\n $borderRadiusX={1.25}\n $gutterX={0.35}\n $gapX={0.35}\n $flexGapX={0.25}\n >\n <Text $renderAs=\"ac3-black\">\n {remainingTime <= ANIMATION_TIME.LAST_FIVE\n ? `0${LAST_FIVE / 60}:00`\n : `${START_TIMER / 60}:00`}\n </Text>\n <Text $renderAs=\"ac3-black\">Left</Text>\n </NoWrapRow>\n </OpenCloseAnimation>\n {showIcon && (\n <IconWrapper>\n <OpenCloseAnimation\n onAnimationComplete={onAnimateComplete}\n background=\"BLACK\"\n Icon={\n <Clickable label=\"Extend Class\" onClick={onExtendClass}>\n <FlexView $background=\"WHITE\" $borderRadiusX={1.25} $borderColor=\"BLACK_3\">\n <PlusIcon width={16} height={16} />\n </FlexView>\n </Clickable>\n }\n size={24}\n visible={animateTip}\n idleTime={EXTEND_IDLE}\n >\n <StyledText $color=\"WHITE\" $renderAs=\"body3\">\n Extend Class\n </StyledText>\n </OpenCloseAnimation>\n </IconWrapper>\n )}\n </>\n );\n};\n\nexport default memo(Animate);\n"],"names":["IconWrapper","styled","FlexView","theme","StyledText","Text","NoWrapRow","Animate","props","canShowWarning","setCanShowWarning","remainingTime","onExtendClass","showExtendIcon","animateTip","setAnimateTip","useState","timer","useRef","previousCanShowWarning","usePrevious","playNotifSound","useAudioPlayer","ALERT_AUDIO_LIST","showIcon","ANIMATION_TIME","onClockAnimationComplete","useCallback","onOpenAnimationComplete","onAnimateComplete","useEffect","jsxs","Fragment","jsx","OpenCloseAnimation","TIME_LEFT_IDLE","LAST_FIVE","START_TIMER","Clickable","PlusIcon","EXTEND_IDLE","Animate$1","memo"],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsxs as n, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import s from "styled-components";
|
|
3
|
+
import r from "../../layout/flex-view.js";
|
|
4
|
+
import a from "./animate.js";
|
|
5
|
+
import l from "./animations/ripple.js";
|
|
6
|
+
const f = s(r)`
|
|
7
|
+
position: fixed;
|
|
8
|
+
top: 0;
|
|
9
|
+
bottom: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
right: 0;
|
|
12
|
+
background: rgba(0, 0, 0, 0.4);
|
|
13
|
+
z-index: ${({ theme: i }) => i.zIndex.EXTEND_CLASS_ANIMATION_1};
|
|
14
|
+
`, g = ({
|
|
15
|
+
children: i,
|
|
16
|
+
showRipple: t,
|
|
17
|
+
rippleColor: e,
|
|
18
|
+
showExtendOverlay: p,
|
|
19
|
+
...m
|
|
20
|
+
}) => /* @__PURE__ */ n(r, { $position: "relative", $flexDirection: "row", $alignItems: "center", children: [
|
|
21
|
+
p && /* @__PURE__ */ o(f, {}),
|
|
22
|
+
/* @__PURE__ */ o(l, { color: e, visible: t, children: i }),
|
|
23
|
+
/* @__PURE__ */ o(a, { ...m })
|
|
24
|
+
] });
|
|
25
|
+
export {
|
|
26
|
+
g as default
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=class-time-animation-wrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"class-time-animation-wrapper.js","sources":["../../../../../src/features/ui/timers/class-time/class-time-animation-wrapper.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../layout/flex-view';\nimport Animate from './animate';\nimport Ripple from './animations/ripple';\n\nconst OpacityWrapper = styled(FlexView)`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_1};\n`;\n\ninterface IClassTimeAnimationsWrapperProps {\n children: ReactNode;\n showRipple: boolean;\n rippleColor: 'ORANGE_3' | 'YELLOW_3';\n showExtendOverlay: boolean;\n canShowWarning: boolean;\n setCanShowWarning: (value: boolean) => void;\n remainingTime: number;\n onExtendClass?: () => void;\n showExtendIcon: boolean;\n}\n\nconst ClassTimeAnimationWrapper = ({\n children,\n showRipple,\n rippleColor,\n showExtendOverlay,\n ...rest\n}: IClassTimeAnimationsWrapperProps) => {\n return (\n <FlexView $position=\"relative\" $flexDirection=\"row\" $alignItems=\"center\">\n {showExtendOverlay && <OpacityWrapper />}\n <Ripple color={rippleColor} visible={showRipple}>\n {children}\n </Ripple>\n <Animate {...rest} />\n </FlexView>\n );\n};\n\nexport default ClassTimeAnimationWrapper;\n"],"names":["OpacityWrapper","styled","FlexView","theme","ClassTimeAnimationWrapper","children","showRipple","rippleColor","showExtendOverlay","rest","Ripple","jsx","Animate"],"mappings":";;;;;AAQA,MAAMA,IAAiBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOzB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,wBAAwB;AAAA,GAe3DC,IAA4B,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,GAAGC;AACL,wBAEKP,GAAS,EAAA,WAAU,YAAW,gBAAe,OAAM,aAAY,UAC7D,UAAA;AAAA,EAAAM,uBAAsBR,GAAe,EAAA;AAAA,oBACrCU,GAAO,EAAA,OAAOH,GAAa,SAASD,GAClC,UAAAD,GACH;AAAA,EACA,gBAAAM,EAACC,GAAS,EAAA,GAAGH,GAAM;AACrB,EAAA,CAAA;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { jsx as o, jsxs as m } from "react/jsx-runtime";
|
|
2
|
+
import { memo as n } from "react";
|
|
3
|
+
import s from "../../../../assets/line-icons/icons/clock2.js";
|
|
4
|
+
import c from "../../../hooks/use-visibility-change.js";
|
|
5
5
|
import i from "../../layout/flex-view.js";
|
|
6
|
-
import
|
|
6
|
+
import l from "../clock/clock.js";
|
|
7
7
|
import a from "../timer/timer.js";
|
|
8
|
-
import p from "./class-time-
|
|
8
|
+
import p from "./class-time-animation-wrapper.js";
|
|
9
9
|
import { IconWrapper as f } from "./constants.js";
|
|
10
10
|
import { useClassTimeLogic as $ } from "./use-class-time-logic.js";
|
|
11
11
|
const d = (e) => {
|
|
12
|
-
const t =
|
|
13
|
-
return
|
|
12
|
+
const t = c(), r = $(e, t);
|
|
13
|
+
return r.shouldRender ? /* @__PURE__ */ o(i, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ o(p, { ...r.animationProps, children: /* @__PURE__ */ m(
|
|
14
14
|
i,
|
|
15
15
|
{
|
|
16
16
|
$flexDirection: "row",
|
|
@@ -22,12 +22,12 @@ const d = (e) => {
|
|
|
22
22
|
$flexGapX: 0.25,
|
|
23
23
|
$position: "relative",
|
|
24
24
|
children: [
|
|
25
|
-
/* @__PURE__ */
|
|
26
|
-
|
|
25
|
+
/* @__PURE__ */ o(f, { $iconColor: r.clockColor, children: /* @__PURE__ */ o(s, {}) }),
|
|
26
|
+
r.canStartTimer ? /* @__PURE__ */ o(a, { ...r.timerProps }) : /* @__PURE__ */ o(l, { ...r.clockProps })
|
|
27
27
|
]
|
|
28
28
|
}
|
|
29
29
|
) }) }) : null;
|
|
30
|
-
}, w =
|
|
30
|
+
}, w = n(d);
|
|
31
31
|
export {
|
|
32
32
|
w as default
|
|
33
33
|
};
|
|
@@ -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
|
|
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 { IconWrapper } from './constants';\nimport { useClassTimeLogic } from './use-class-time-logic';\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":["ClassTime","props","isTabActive","useVisibilityChange","logic","useClassTimeLogic","jsx","FlexView","ClassTimeAnimationWrapper","jsxs","IconWrapper","Clock2Icon","Timer","Clock","classTime","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAY,CAACC,MAA2B;AAC5C,QAAMC,IAAcC,KAEdC,IAAQC,EAAkBJ,GAAOC,CAAW;AAE9C,SAACE,EAAM,eAKT,gBAAAE,EAACC,GAAS,EAAA,gBAAe,OAAM,aAAY,UACzC,UAAC,gBAAAD,EAAAE,GAAA,EAA2B,GAAGJ,EAAM,gBACnC,UAAA,gBAAAK;AAAA,IAACF;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,gBAAAD,EAACI,KAAY,YAAYN,EAAM,YAC7B,UAAA,gBAAAE,EAACK,IAAW,CAAA,GACd;AAAA,QACCP,EAAM,gBAAiB,gBAAAE,EAAAM,GAAA,EAAO,GAAGR,EAAM,YAAY,IAAM,gBAAAE,EAAAO,GAAA,EAAO,GAAGT,EAAM,WAAY,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAE1F,CAAA,EACF,CAAA,IAtBO;AAwBX,GAEeU,IAAAC,EAAKf,CAAS;"}
|
|
@@ -1,98 +1,78 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { START_TIMER as
|
|
3
|
-
const
|
|
1
|
+
import { useState as m, useMemo as A, useCallback as h, useEffect as T } from "react";
|
|
2
|
+
import { START_TIMER as u, LAST_FIVE as D, ANIMATION_TIME as S, getClockColor as N } from "./constants.js";
|
|
3
|
+
const V = (w, r) => {
|
|
4
4
|
const {
|
|
5
5
|
classDuration: e,
|
|
6
|
-
classStartedTime:
|
|
7
|
-
extendedTime:
|
|
8
|
-
ongoing:
|
|
6
|
+
classStartedTime: n,
|
|
7
|
+
extendedTime: t,
|
|
8
|
+
ongoing: x,
|
|
9
9
|
onComplete: a,
|
|
10
|
-
onExtendClass:
|
|
11
|
-
onExtendedTimeStart:
|
|
12
|
-
showExtendIcon:
|
|
13
|
-
} =
|
|
14
|
-
(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
()
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
), _ = G(/* @__PURE__ */ new Set()), o = l(
|
|
35
|
-
() => I.filter((n) => {
|
|
36
|
-
const k = n.id || `multi-reminder-${n.at}`;
|
|
37
|
-
return !_.current.has(k) && d >= n.at;
|
|
38
|
-
}).sort((n, k) => k.at - n.at)[0],
|
|
39
|
-
[I, d]
|
|
40
|
-
), N = f(() => {
|
|
41
|
-
if (!o) return;
|
|
42
|
-
const n = o.id || `multi-reminder-${o.at}`;
|
|
43
|
-
_.current.add(n), typeof o.callback == "function" && o.callback();
|
|
44
|
-
}, [o]), O = f(() => {
|
|
45
|
-
if (r && !s) {
|
|
46
|
-
T();
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
a == null || a();
|
|
50
|
-
}, [r, s, a, T]);
|
|
51
|
-
R(() => {
|
|
52
|
-
const n = +/* @__PURE__ */ new Date() / 1e3 >= +t / 1e3 + e && e;
|
|
53
|
-
i && n && (a == null || a());
|
|
54
|
-
}, [e, t, i, a]), R(() => {
|
|
55
|
-
i && S && !s && T();
|
|
56
|
-
}, [i, T, s, S]), R(() => {
|
|
57
|
-
e && t && i && w(p);
|
|
58
|
-
}, [t, e, p, i]);
|
|
59
|
-
const P = {
|
|
60
|
-
endTime: F,
|
|
61
|
-
onComplete: O,
|
|
62
|
-
reminder: o == null ? void 0 : o.at,
|
|
63
|
-
onReminder: N
|
|
64
|
-
}, V = {
|
|
65
|
-
completionTime: e - E.LAST_TEN,
|
|
66
|
-
onComplete: u,
|
|
67
|
-
startedOn: new Date(t)
|
|
68
|
-
}, $ = {
|
|
69
|
-
showRipple: !h && g,
|
|
70
|
-
rippleColor: d <= Y ? "ORANGE_3" : "YELLOW_3",
|
|
71
|
-
showExtendOverlay: Math.floor(e - (+/* @__PURE__ */ new Date() - +t) / 1e3) <= E.LAST_FIVE && h,
|
|
72
|
-
warningProps: {
|
|
73
|
-
animateClock: h,
|
|
74
|
-
classStartedTime: +t,
|
|
75
|
-
duration: e,
|
|
76
|
-
onExtendClass: y,
|
|
77
|
-
setStartTimer: w,
|
|
78
|
-
setAnimateClock: x,
|
|
79
|
-
showExtendIcon: !s && A
|
|
10
|
+
onExtendClass: I,
|
|
11
|
+
onExtendedTimeStart: d,
|
|
12
|
+
showExtendIcon: _ = !1
|
|
13
|
+
} = w, c = (+/* @__PURE__ */ new Date() - +n) / 1e3, o = Math.floor(e - c), [s, g] = m(
|
|
14
|
+
!!(t && o <= t * 60)
|
|
15
|
+
), [i, E] = m(!1), [p, L] = m(
|
|
16
|
+
!!(c >= e - u || s || t)
|
|
17
|
+
), R = A(
|
|
18
|
+
() => e + +n / 1e3,
|
|
19
|
+
[e, n]
|
|
20
|
+
), C = h(() => {
|
|
21
|
+
g(!0), d == null || d();
|
|
22
|
+
}, [d]), f = h(() => {
|
|
23
|
+
E(!0);
|
|
24
|
+
}, []);
|
|
25
|
+
T(() => {
|
|
26
|
+
const l = +/* @__PURE__ */ new Date() / 1e3 >= +n / 1e3 + e && e;
|
|
27
|
+
r && l && (a == null || a());
|
|
28
|
+
}, [e, n, r, a]), T(() => {
|
|
29
|
+
r && t && o <= t * 60 && !s && C();
|
|
30
|
+
}, [t, s, C, r, o]), T(() => {
|
|
31
|
+
if (e && n && r) {
|
|
32
|
+
const l = !!(c >= e - u || s || t);
|
|
33
|
+
L(l);
|
|
80
34
|
}
|
|
35
|
+
}, [
|
|
36
|
+
n,
|
|
37
|
+
e,
|
|
38
|
+
r,
|
|
39
|
+
c,
|
|
40
|
+
s,
|
|
41
|
+
t
|
|
42
|
+
]);
|
|
43
|
+
const M = {
|
|
44
|
+
endTime: R,
|
|
45
|
+
onComplete: a,
|
|
46
|
+
reminder: S.LAST_FIVE,
|
|
47
|
+
onReminder: f
|
|
48
|
+
}, O = {
|
|
49
|
+
completionTime: e - S.LAST_TEN,
|
|
50
|
+
onComplete: f,
|
|
51
|
+
startedOn: new Date(n)
|
|
52
|
+
}, k = {
|
|
53
|
+
canShowWarning: i,
|
|
54
|
+
setCanShowWarning: E,
|
|
55
|
+
remainingTime: o,
|
|
56
|
+
onExtendClass: I,
|
|
57
|
+
showExtendIcon: !s && _,
|
|
58
|
+
showRipple: !i && p,
|
|
59
|
+
rippleColor: o <= D ? "ORANGE_3" : "YELLOW_3",
|
|
60
|
+
showExtendOverlay: o <= S.LAST_FIVE && i
|
|
81
61
|
};
|
|
82
62
|
return {
|
|
83
|
-
shouldRender: !!(
|
|
84
|
-
|
|
85
|
-
clockColor:
|
|
86
|
-
remainingTime:
|
|
87
|
-
extendedTime:
|
|
63
|
+
shouldRender: !!(x && !(c >= 0 && o <= 0)),
|
|
64
|
+
canStartTimer: p,
|
|
65
|
+
clockColor: N({
|
|
66
|
+
remainingTime: o,
|
|
67
|
+
extendedTime: t || 0,
|
|
88
68
|
extendedTimeStarted: s
|
|
89
69
|
}),
|
|
90
|
-
timerProps:
|
|
91
|
-
clockProps:
|
|
92
|
-
animationProps:
|
|
70
|
+
timerProps: M,
|
|
71
|
+
clockProps: O,
|
|
72
|
+
animationProps: k
|
|
93
73
|
};
|
|
94
74
|
};
|
|
95
75
|
export {
|
|
96
|
-
|
|
76
|
+
V as useClassTimeLogic
|
|
97
77
|
};
|
|
98
78
|
//# 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 {
|
|
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, useMemo } from 'react';\n\nimport { ANIMATION_TIME, getClockColor, LAST_FIVE, START_TIMER } from './constants';\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\n const elapsedTime = (+new Date() - +classStartedTime) / 1000;\n const remainingTime = Math.floor(classDuration - elapsedTime);\n\n const [extendedTimeStarted, setExtendedTimeStarted] = useState(\n !!(extendedTime && remainingTime <= extendedTime * 60),\n );\n const [canShowWarning, setCanShowWarning] = useState(false);\n const [canStartTimer, setCanStartTimer] = useState(\n !!(elapsedTime >= classDuration - START_TIMER || extendedTimeStarted || extendedTime),\n );\n\n const endTime = useMemo(\n () => classDuration + +classStartedTime / 1000,\n [classDuration, classStartedTime],\n );\n\n const handleStartExtendedTime = useCallback(() => {\n setExtendedTimeStarted(true);\n onExtendedTimeStart?.();\n }, [onExtendedTimeStart]);\n\n const handleStartAnimation = useCallback(() => {\n setCanShowWarning(true);\n }, []);\n\n useEffect(() => {\n const isClassCompleted =\n +new Date() / 1000 >= +classStartedTime / 1000 + classDuration && classDuration;\n\n if (isTabActive && isClassCompleted) {\n onComplete?.();\n }\n }, [classDuration, classStartedTime, isTabActive, onComplete]);\n\n useEffect(() => {\n if (isTabActive && extendedTime && remainingTime <= extendedTime * 60 && !extendedTimeStarted) {\n handleStartExtendedTime();\n }\n }, [extendedTime, extendedTimeStarted, handleStartExtendedTime, isTabActive, remainingTime]);\n\n useEffect(() => {\n if (classDuration && classStartedTime && isTabActive) {\n const canStart = !!(\n elapsedTime >= classDuration - START_TIMER ||\n extendedTimeStarted ||\n extendedTime\n );\n\n setCanStartTimer(canStart);\n }\n }, [\n classStartedTime,\n classDuration,\n isTabActive,\n elapsedTime,\n extendedTimeStarted,\n extendedTime,\n ]);\n\n const timerProps = {\n endTime: endTime,\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: !extendedTimeStarted && 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: getClockColor({\n remainingTime,\n extendedTime: extendedTime || 0,\n extendedTimeStarted,\n }),\n timerProps,\n clockProps,\n animationProps,\n };\n};\n"],"names":["useClassTimeLogic","props","isTabActive","classDuration","classStartedTime","extendedTime","ongoing","onComplete","onExtendClass","onExtendedTimeStart","showExtendIcon","elapsedTime","remainingTime","extendedTimeStarted","setExtendedTimeStarted","useState","canShowWarning","setCanShowWarning","canStartTimer","setCanStartTimer","START_TIMER","endTime","useMemo","handleStartExtendedTime","useCallback","handleStartAnimation","useEffect","isClassCompleted","canStart","timerProps","ANIMATION_TIME","clockProps","animationProps","LAST_FIVE","getClockColor"],"mappings":";;AAMa,MAAAA,IAAoB,CAACC,GAAwBC,MAAyB;AAC3E,QAAA;AAAA,IACJ,eAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,EACf,IAAAT,GAEEU,KAAe,CAAC,oBAAI,KAAK,IAAI,CAACP,KAAoB,KAClDQ,IAAgB,KAAK,MAAMT,IAAgBQ,CAAW,GAEtD,CAACE,GAAqBC,CAAsB,IAAIC;AAAA,IACpD,CAAC,EAAEV,KAAgBO,KAAiBP,IAAe;AAAA,EAAA,GAE/C,CAACW,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,CAACG,GAAeC,CAAgB,IAAIJ;AAAA,IACxC,CAAC,EAAEJ,KAAeR,IAAgBiB,KAAeP,KAAuBR;AAAA,EAAA,GAGpEgB,IAAUC;AAAA,IACd,MAAMnB,IAAgB,CAACC,IAAmB;AAAA,IAC1C,CAACD,GAAeC,CAAgB;AAAA,EAAA,GAG5BmB,IAA0BC,EAAY,MAAM;AAChD,IAAAV,EAAuB,EAAI,GACLL,KAAA,QAAAA;AAAA,EAAA,GACrB,CAACA,CAAmB,CAAC,GAElBgB,IAAuBD,EAAY,MAAM;AAC7C,IAAAP,EAAkB,EAAI;AAAA,EACxB,GAAG,CAAE,CAAA;AAEL,EAAAS,EAAU,MAAM;AACR,UAAAC,IACJ,CAAK,oBAAA,SAAS,OAAQ,CAACvB,IAAmB,MAAOD,KAAiBA;AAEpE,IAAID,KAAeyB,MACJpB,KAAA,QAAAA;AAAA,KAEd,CAACJ,GAAeC,GAAkBF,GAAaK,CAAU,CAAC,GAE7DmB,EAAU,MAAM;AACd,IAAIxB,KAAeG,KAAgBO,KAAiBP,IAAe,MAAM,CAACQ,KAChDU;EAC1B,GACC,CAAClB,GAAcQ,GAAqBU,GAAyBrB,GAAaU,CAAa,CAAC,GAE3Fc,EAAU,MAAM;AACV,QAAAvB,KAAiBC,KAAoBF,GAAa;AACpD,YAAM0B,IAAW,CAAC,EAChBjB,KAAeR,IAAgBiB,KAC/BP,KACAR;AAGF,MAAAc,EAAiBS,CAAQ;AAAA,IAC3B;AAAA,EAAA,GACC;AAAA,IACDxB;AAAA,IACAD;AAAA,IACAD;AAAA,IACAS;AAAA,IACAE;AAAA,IACAR;AAAA,EAAA,CACD;AAED,QAAMwB,IAAa;AAAA,IACjB,SAAAR;AAAA,IACA,YAAAd;AAAA,IACA,UAAUuB,EAAe;AAAA,IACzB,YAAYL;AAAA,EAAA,GAGRM,IAAa;AAAA,IACjB,gBAAgB5B,IAAgB2B,EAAe;AAAA,IAC/C,YAAYL;AAAA,IACZ,WAAW,IAAI,KAAKrB,CAAgB;AAAA,EAAA,GAGhC4B,IAAiB;AAAA,IACrB,gBAAAhB;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAL;AAAA,IACA,eAAAJ;AAAA,IACA,gBAAgB,CAACK,KAAuBH;AAAA,IACxC,YAAY,CAACM,KAAkBE;AAAA,IAC/B,aAAcN,KAAiBqB,IAAY,aAAa;AAAA,IACxD,mBAAmBrB,KAAiBkB,EAAe,aAAad;AAAA,EAAA;AAG3D,SAAA;AAAA,IACL,cAAc,CAAC,EAAEV,KAAW,EAAEK,KAAe,KAAKC,KAAiB;AAAA,IACnE,eAAAM;AAAA,IACA,YAAYgB,EAAc;AAAA,MACxB,eAAAtB;AAAA,MACA,cAAcP,KAAgB;AAAA,MAC9B,qBAAAQ;AAAA,IAAA,CACD;AAAA,IACD,YAAAgB;AAAA,IACA,YAAAE;AAAA,IACA,gBAAAC;AAAA,EAAA;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsxs as p, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import s from "styled-components";
|
|
3
|
-
import t from "../../layout/flex-view.js";
|
|
4
|
-
import l from "./animate.js";
|
|
5
|
-
import a from "./animations/ripple.js";
|
|
6
|
-
const f = s(t)`
|
|
7
|
-
position: fixed;
|
|
8
|
-
top: 0;
|
|
9
|
-
bottom: 0;
|
|
10
|
-
left: 0;
|
|
11
|
-
right: 0;
|
|
12
|
-
background: rgba(0, 0, 0, 0.4);
|
|
13
|
-
z-index: ${({ theme: i }) => i.zIndex.EXTEND_CLASS_ANIMATION_1};
|
|
14
|
-
`, g = ({
|
|
15
|
-
children: i,
|
|
16
|
-
showRipple: r,
|
|
17
|
-
rippleColor: e,
|
|
18
|
-
showExtendOverlay: m,
|
|
19
|
-
warningProps: n
|
|
20
|
-
}) => /* @__PURE__ */ p(t, { $position: "relative", $flexDirection: "row", $alignItems: "center", children: [
|
|
21
|
-
m && /* @__PURE__ */ o(f, {}),
|
|
22
|
-
/* @__PURE__ */ o(a, { color: e, visible: r, children: i }),
|
|
23
|
-
/* @__PURE__ */ o(l, { ...n })
|
|
24
|
-
] });
|
|
25
|
-
export {
|
|
26
|
-
g as default
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=class-time-animations.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"class-time-animations.js","sources":["../../../../../src/features/ui/timers/class-time/class-time-animations.tsx"],"sourcesContent":["import type { TColorNames } from '../../types';\nimport type { ReactNode } from 'react';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../layout/flex-view';\nimport Animate from './animate';\nimport Ripple from './animations/ripple';\n\nconst OpacityWrapper = styled(FlexView)`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: ${({ theme }) => theme.zIndex.EXTEND_CLASS_ANIMATION_1};\n`;\n\ninterface IClassTimeAnimationsProps {\n children: ReactNode;\n showRipple: boolean;\n rippleColor: TColorNames;\n showExtendOverlay: boolean;\n warningProps: {\n animateClock: boolean;\n classStartedTime: number;\n duration: number;\n showExtendIcon: boolean;\n onExtendClass?: () => void;\n setAnimateClock: (value: boolean) => void;\n setStartTimer: (value: boolean) => void;\n };\n}\n\nconst ClassTimeAnimations = ({\n children,\n showRipple,\n rippleColor,\n showExtendOverlay,\n warningProps,\n}: IClassTimeAnimationsProps) => {\n return (\n <FlexView $position=\"relative\" $flexDirection=\"row\" $alignItems=\"center\">\n {showExtendOverlay && <OpacityWrapper />}\n <Ripple color={rippleColor} visible={showRipple}>\n {children}\n </Ripple>\n <Animate {...warningProps} />\n </FlexView>\n );\n};\n\nexport default ClassTimeAnimations;\n"],"names":["OpacityWrapper","styled","FlexView","theme","ClassTimeAnimations","children","showRipple","rippleColor","showExtendOverlay","warningProps","Ripple","jsx","Animate"],"mappings":";;;;;AASA,MAAMA,IAAiBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOzB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,wBAAwB;AAAA,GAmB3DC,IAAsB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AACF,wBAEKP,GAAS,EAAA,WAAU,YAAW,gBAAe,OAAM,aAAY,UAC7D,UAAA;AAAA,EAAAM,uBAAsBR,GAAe,EAAA;AAAA,oBACrCU,GAAO,EAAA,OAAOH,GAAa,SAASD,GAClC,UAAAD,GACH;AAAA,EACA,gBAAAM,EAACC,GAAS,EAAA,GAAGH,GAAc;AAC7B,EAAA,CAAA;"}
|