@cuemath/leap 3.0.12-as4 → 3.0.12-ays2
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/chapters-v2/comps/node-card/node-card-styled.js +34 -46
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js.map +1 -1
- package/dist/features/chapters-v2/comps/node-card/student-actions/student-actions.js +95 -98
- package/dist/features/chapters-v2/comps/node-card/student-actions/student-actions.js.map +1 -1
- package/dist/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.js +154 -165
- package/dist/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.js.map +1 -1
- package/package.json +1 -1
- package/dist/features/ui/border-path-animation/border-path-animation-styled.js +0 -51
- package/dist/features/ui/border-path-animation/border-path-animation-styled.js.map +0 -1
- package/dist/features/ui/border-path-animation/border-path-animation.js +0 -108
- package/dist/features/ui/border-path-animation/border-path-animation.js.map +0 -1
@@ -1,20 +1,14 @@
|
|
1
1
|
import t from "styled-components";
|
2
|
-
import
|
3
|
-
import
|
2
|
+
import p from "../../../../assets/line-icons/icons/important.js";
|
3
|
+
import s from "../../../../assets/line-icons/icons/lock2.js";
|
4
4
|
import e from "../../../ui/layout/flex-view.js";
|
5
|
-
import
|
6
|
-
const
|
7
|
-
|
8
|
-
theme: r,
|
9
|
-
$disabled: n,
|
10
|
-
$isSheetLocked: a
|
11
|
-
}) => {
|
12
|
-
const { BLACK_1: p, BLACK: s, BLACK_T_15: i } = r.colors;
|
5
|
+
import d from "../../../ui/text/text.js";
|
6
|
+
const f = t(e)(({ theme: o, $disabled: r }) => {
|
7
|
+
const { BLACK: i, BLACK_T_15: n } = o.colors;
|
13
8
|
return `
|
14
|
-
cursor: ${
|
9
|
+
cursor: ${r ? "not-allowed" : "pointer"};
|
15
10
|
position: relative;
|
16
|
-
border-image: linear-gradient(to right, ${
|
17
|
-
${o && `outline: 1px solid ${i};`};
|
11
|
+
border-image: linear-gradient(to right, ${n} 0%, ${n} 100%);
|
18
12
|
|
19
13
|
.node-card-border {
|
20
14
|
position: absolute;
|
@@ -29,13 +23,13 @@ const m = t(e)(({
|
|
29
23
|
|
30
24
|
.node-card-border > .border-path {
|
31
25
|
fill: none;
|
32
|
-
stroke: ${
|
26
|
+
stroke: ${n};
|
33
27
|
stroke-width: 1.5;
|
34
28
|
}
|
35
29
|
|
36
30
|
.node-card-border > .border-path-animation {
|
37
31
|
fill: none;
|
38
|
-
stroke: ${
|
32
|
+
stroke: ${i};
|
39
33
|
stroke-width: 1.5;
|
40
34
|
//* view box size 170 + 56 + 170 + 56 = 452
|
41
35
|
//* 452 / 2 = 226
|
@@ -52,18 +46,12 @@ const m = t(e)(({
|
|
52
46
|
}
|
53
47
|
|
54
48
|
&:hover {
|
55
|
-
${!
|
56
|
-
|
57
|
-
|
58
|
-
stroke-dasharray: 452;
|
59
|
-
animation: none;
|
60
|
-
}
|
61
|
-
`}
|
62
|
-
|
63
|
-
${o && !a && `outline: 1px solid ${s};`};
|
49
|
+
${!r && `
|
50
|
+
outline: 1px solid ${n};
|
51
|
+
`}
|
64
52
|
}
|
65
53
|
`;
|
66
|
-
}), g = t(
|
54
|
+
}), g = t(p)(({ theme: o }) => {
|
67
55
|
const { layout: r } = o;
|
68
56
|
return `
|
69
57
|
width: ${r.gutter * 0.75}px;
|
@@ -72,54 +60,54 @@ const m = t(e)(({
|
|
72
60
|
top: -2.5px;
|
73
61
|
right: -2.5px;
|
74
62
|
`;
|
75
|
-
}),
|
63
|
+
}), b = t(e)(({ $bgImage: o }) => `
|
76
64
|
background-image: url(${o});
|
77
65
|
|
78
66
|
& .context-menu {
|
79
67
|
justify-self: flex-end;
|
80
68
|
margin-left: auto;
|
81
69
|
}
|
82
|
-
`),
|
70
|
+
`), m = t(e)`
|
83
71
|
border-radius: 50%;
|
84
|
-
`,
|
72
|
+
`, $ = t(e)(() => `
|
85
73
|
position: relative;
|
86
74
|
padding: 12px 8px 12px 12px;
|
87
|
-
`),
|
75
|
+
`), k = t(e)(({ $top: o, $right: r }) => `
|
88
76
|
position: absolute;
|
89
77
|
top: ${o ?? 0}px;
|
90
78
|
right: ${r ?? 0}px;
|
91
79
|
z-index: 3;
|
92
80
|
`);
|
93
|
-
t(
|
81
|
+
t(s)(({}) => `
|
94
82
|
width: 28px;
|
95
83
|
height: 28px;
|
96
84
|
`);
|
97
|
-
const
|
85
|
+
const w = t(e)(({
|
98
86
|
theme: o,
|
99
87
|
$paddingRight: r,
|
100
|
-
$paddingLeft:
|
88
|
+
$paddingLeft: i
|
101
89
|
}) => {
|
102
|
-
const { BLACK_1:
|
90
|
+
const { BLACK_1: n, WHITE_1: a } = o.colors;
|
103
91
|
return `
|
104
92
|
position: absolute;
|
105
93
|
top: -10px;
|
106
94
|
right: -10px;
|
107
95
|
padding: 0px;
|
108
|
-
padding-left: ${
|
96
|
+
padding-left: ${i}px;
|
109
97
|
padding-right: ${r}px;
|
110
|
-
background: ${
|
98
|
+
background: ${n};
|
111
99
|
|
112
100
|
path {
|
113
|
-
fill: ${
|
101
|
+
fill: ${a};
|
114
102
|
}
|
115
103
|
`;
|
116
|
-
}),
|
104
|
+
}), I = t(d)(() => `
|
117
105
|
display: -webkit-box;
|
118
106
|
-webkit-box-orient: vertical;
|
119
107
|
-webkit-line-clamp: 2;
|
120
108
|
text-overflow: ellipsis;
|
121
109
|
overflow: hidden;
|
122
|
-
`),
|
110
|
+
`), v = t(e)(({ theme: o }) => `
|
123
111
|
cursor: pointer;
|
124
112
|
|
125
113
|
&:hover {
|
@@ -145,15 +133,15 @@ const v = t(e)(({
|
|
145
133
|
}
|
146
134
|
`);
|
147
135
|
export {
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
136
|
+
m as IconWrapper,
|
137
|
+
w as InProgressIconWrapper,
|
138
|
+
f as NodeCardContainer,
|
139
|
+
$ as NodeCardContentWrapper,
|
140
|
+
b as NodeCardInfoWrapper,
|
141
|
+
I as NodeCardTitle,
|
142
|
+
v as NodeKebabMenuWrapper,
|
155
143
|
W as NodeMenuOptionsWrapper,
|
156
|
-
|
144
|
+
k as SheetTagWrapper,
|
157
145
|
g as StyledImportantIcon
|
158
146
|
};
|
159
147
|
//# sourceMappingURL=node-card-styled.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n $
|
1
|
+
{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n $disabled: boolean;\n $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({ theme, $disabled }) => {\n const { BLACK, BLACK_T_15 } = theme.colors;\n\n return `\n cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n position: relative;\n border-image: linear-gradient(to right, ${BLACK_T_15} 0%, ${BLACK_T_15} 100%);\n\n .node-card-border {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: transparent;\n }\n\n .node-card-border > .border-path {\n fill: none;\n stroke: ${BLACK_T_15};\n stroke-width: 1.5;\n }\n\n .node-card-border > .border-path-animation {\n fill: none;\n stroke: ${BLACK};\n stroke-width: 1.5;\n //* view box size 170 + 56 + 170 + 56 = 452\n //* 452 / 2 = 226\n stroke-dasharray: 226 226;\n stroke-dashoffset: 0;\n\n animation: dashmove 6s linear infinite;\n }\n \n @keyframes dashmove {\n to {\n stroke-dashoffset: -900;\n }\n }\n \n &:hover {\n ${\n !$disabled &&\n `\n outline: 1px solid ${BLACK_T_15};\n `\n } \n }\n `;\n});\n\nconst StyledImportantIcon = styled(ImportantIcon)(({ theme }) => {\n const { layout } = theme;\n\n return `\n width: ${layout.gutter * 0.75}px;\n height: ${layout.gutter * 0.75}px;\n position: absolute;\n top: -2.5px;\n right: -2.5px;\n `;\n});\n\ninterface INodeCardInfoWrapper {\n $bgImage: string;\n}\n\nconst NodeCardInfoWrapper = styled(FlexView)<INodeCardInfoWrapper>(({ $bgImage }) => {\n return `\n background-image: url(${$bgImage});\n\n & .context-menu {\n justify-self: flex-end;\n margin-left: auto;\n }\n `;\n});\n\nconst IconWrapper = styled(FlexView)`\n border-radius: 50%;\n`;\n\nconst NodeCardContentWrapper = styled(FlexView)(() => {\n return `\n position: relative;\n padding: 12px 8px 12px 12px;\n `;\n});\n\ninterface ISheetTagWrapper {\n $top?: number;\n $right?: number;\n}\n\nconst SheetTagWrapper = styled(FlexView)<ISheetTagWrapper>(({ $top, $right }) => {\n return `\n position: absolute;\n top: ${$top ?? 0}px;\n right: ${$right ?? 0}px;\n z-index: 3;\n`;\n});\n\nconst StyledLockIcon = styled(Lock2Icon)(({}) => {\n return `\n width: 28px;\n height: 28px;\n `;\n});\n\nconst InProgressIconWrapper = styled(FlexView)<{ $paddingRight: number; $paddingLeft: number }>(({\n theme,\n $paddingRight,\n $paddingLeft,\n}) => {\n const { BLACK_1, WHITE_1 } = theme.colors;\n\n return `\n position: absolute;\n top: -10px;\n right: -10px;\n padding: 0px;\n padding-left: ${$paddingLeft}px;\n padding-right: ${$paddingRight}px;\n background: ${BLACK_1};\n\n path {\n fill: ${WHITE_1};\n }\n `;\n});\n\nconst NodeCardTitle = styled(Text)(() => {\n return `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n `;\n});\n\nconst NodeKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n return `\n cursor: pointer;\n \n &:hover {\n border-radius: 50%;\n background: ${theme.colors.WHITE_5}; \n }\n `;\n});\n\ninterface INodeOptionsMenuWrapper {\n $visible: boolean;\n}\n\nconst NodeMenuOptionsWrapper = styled(FlexView)<INodeOptionsMenuWrapper>(({ theme, $visible }) => {\n return `\n cursor: pointer;\n\n position: absolute;\n z-index: 6;\n top: calc(100% + 4px);\n left: 0;\n\n transform-origin: top;\n transform: scaleY(${$visible ? 1 : 0});\n opacity: ${$visible ? 1 : 0};\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n \n &:hover {\n border-radius: 50%;\n background: ${theme.colors.WHITE_5}; \n }\n `;\n});\n\nexport {\n NodeCardContainer,\n StyledImportantIcon,\n NodeCardInfoWrapper,\n IconWrapper,\n NodeCardContentWrapper,\n SheetTagWrapper,\n StyledLockIcon,\n InProgressIconWrapper,\n NodeCardTitle,\n NodeKebabMenuWrapper,\n NodeMenuOptionsWrapper,\n};\n"],"names":["NodeCardContainer","styled","FlexView","theme","$disabled","BLACK","BLACK_T_15","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","BLACK_1","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAYM,MAAAA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACvF,QAAM,EAAE,OAAAC,GAAO,YAAAC,MAAeH,EAAM;AAE7B,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELE,CAAU,QAAQA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAe1DA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMVD,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBb,CAACD,KACD;AAAA,+BACuBE,CAAU;AAAA,SAEnC;AAAA;AAAA;AAGN,CAAC,GAEKC,IAAsBN,EAAOO,CAAa,EAAE,CAAC,EAAE,OAAAL,QAAY;AACzD,QAAA,EAAE,QAAAM,EAAW,IAAAN;AAEZ,SAAA;AAAA,aACIM,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBT,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAS,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcX,EAAOC,CAAQ;AAAA;AAAA,GAI7BW,IAAyBZ,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKY,IAAkBb,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAa,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBf,EAAOgB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBjB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAgB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYnB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWiB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBtB,EAAOuB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuBxB,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKuB,IAAyBzB,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,GAAO,UAAAwB,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKXxB,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}
|
@@ -1,128 +1,126 @@
|
|
1
|
-
import { jsx as e, jsxs as
|
2
|
-
import { memo as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
8
|
-
import
|
9
|
-
import
|
10
|
-
import {
|
11
|
-
import {
|
12
|
-
import {
|
13
|
-
import {
|
14
|
-
import
|
15
|
-
import
|
16
|
-
|
17
|
-
const le = { renderer: "canvas", autoplay: !1 }, Le = z((A) => {
|
1
|
+
import { jsx as e, jsxs as d, Fragment as H } from "react/jsx-runtime";
|
2
|
+
import { memo as K, useRef as X, useCallback as m } from "react";
|
3
|
+
import j from "../../../../../assets/line-icons/icons/eye2.js";
|
4
|
+
import G from "../../../../../assets/line-icons/icons/redo.js";
|
5
|
+
import z from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
|
6
|
+
import F from "../../../../ui/context-menu/context-menu.js";
|
7
|
+
import P from "../../../../ui/lottie-animation/lottie-animation.js";
|
8
|
+
import Y from "../../../../ui/text/text.js";
|
9
|
+
import { BLOCK_TYPE as Z } from "../../../constants/block-constants.js";
|
10
|
+
import { NODE_CARD_STATES as q } from "../../../constants/node-constants.js";
|
11
|
+
import { getNodeTypeBasedBgImage as J } from "../../../utils/index.js";
|
12
|
+
import { getNodeCardBasedIcon as Q } from "../../../utils/node-card-utils.js";
|
13
|
+
import { NodeCardContainer as U, NodeCardInfoWrapper as V, IconWrapper as ee, StyledImportantIcon as te, NodeCardContentWrapper as re, NodeCardTitle as ne } from "../node-card-styled.js";
|
14
|
+
import oe from "../node-card-tags.js";
|
15
|
+
import ae from "../node-menu-options/node-menu-options.js";
|
16
|
+
const ie = { renderer: "canvas", autoplay: !1 }, be = K((k) => {
|
18
17
|
const {
|
19
18
|
nodeData: t,
|
20
|
-
imageHue:
|
21
|
-
blockType:
|
19
|
+
imageHue: O,
|
20
|
+
blockType: b,
|
22
21
|
onNodeAttempt: a,
|
23
22
|
onNodeReattempt: i,
|
24
|
-
onNodeReview:
|
25
|
-
onNodeView:
|
26
|
-
isStudent:
|
27
|
-
} =
|
23
|
+
onNodeReview: c,
|
24
|
+
onNodeView: r,
|
25
|
+
isStudent: y
|
26
|
+
} = k, {
|
28
27
|
accuracy: L,
|
29
|
-
attempt_location:
|
30
|
-
node_type:
|
31
|
-
card_header:
|
32
|
-
title:
|
33
|
-
state:
|
34
|
-
is_optional:
|
35
|
-
sheet_statement:
|
36
|
-
permissions:
|
37
|
-
marked_as_completed:
|
28
|
+
attempt_location: S,
|
29
|
+
node_type: l,
|
30
|
+
card_header: A,
|
31
|
+
title: E,
|
32
|
+
state: C,
|
33
|
+
is_optional: T,
|
34
|
+
sheet_statement: $,
|
35
|
+
permissions: x,
|
36
|
+
marked_as_completed: s
|
38
37
|
} = t, {
|
39
|
-
can_review:
|
40
|
-
can_start:
|
41
|
-
can_resume:
|
42
|
-
can_reset:
|
43
|
-
} =
|
44
|
-
(
|
45
|
-
switch (
|
38
|
+
can_review: g,
|
39
|
+
can_start: p,
|
40
|
+
can_resume: u,
|
41
|
+
can_reset: _
|
42
|
+
} = x, R = b === Z.GOAL, o = C === q.LOCKED, v = S === "INCLASS", f = !(p || u) && (_ || g), h = X(null), w = J(l), { lottie: B } = Q(l), I = m(
|
43
|
+
(n) => {
|
44
|
+
switch (n) {
|
46
45
|
case "node-card-review":
|
47
|
-
|
46
|
+
s ? r == null || r(t) : c == null || c(t);
|
48
47
|
return;
|
49
48
|
case "node-card-reattempt":
|
50
49
|
i == null || i(t);
|
51
50
|
return;
|
52
51
|
default:
|
53
|
-
throw new Error(`No callback function for ${
|
52
|
+
throw new Error(`No callback function for ${n}`);
|
54
53
|
}
|
55
54
|
},
|
56
|
-
[t, i,
|
57
|
-
),
|
58
|
-
f ||
|
55
|
+
[t, i, c, r, s]
|
56
|
+
), M = m(() => {
|
57
|
+
f || o || (p || u ? a == null || a(t) : s && (r == null || r(t)));
|
59
58
|
}, [
|
60
|
-
h,
|
61
59
|
u,
|
60
|
+
p,
|
62
61
|
t,
|
63
62
|
a,
|
64
|
-
|
63
|
+
r,
|
65
64
|
f,
|
66
|
-
|
67
|
-
|
68
|
-
]),
|
69
|
-
var
|
70
|
-
|
71
|
-
}, [
|
72
|
-
var
|
73
|
-
(
|
74
|
-
}, []),
|
65
|
+
o,
|
66
|
+
s
|
67
|
+
]), W = m(() => {
|
68
|
+
var n;
|
69
|
+
o || (n = h.current) == null || n.play();
|
70
|
+
}, [o]), N = m(() => {
|
71
|
+
var n;
|
72
|
+
(n = h.current) == null || n.stop();
|
73
|
+
}, []), D = [
|
75
74
|
{
|
76
75
|
id: "node-card-review",
|
77
76
|
label: "Review",
|
78
|
-
icon:
|
79
|
-
disabled: !
|
80
|
-
onClick:
|
77
|
+
icon: j,
|
78
|
+
disabled: !g,
|
79
|
+
onClick: I
|
81
80
|
},
|
82
81
|
{
|
83
82
|
id: "node-card-reattempt",
|
84
83
|
label: "Reattempt",
|
85
|
-
icon:
|
86
|
-
disabled: !
|
87
|
-
onClick:
|
84
|
+
icon: G,
|
85
|
+
disabled: !_,
|
86
|
+
onClick: I
|
88
87
|
}
|
89
88
|
];
|
90
89
|
return /* @__PURE__ */ e(
|
91
|
-
|
90
|
+
F,
|
92
91
|
{
|
93
92
|
targetElement: /* @__PURE__ */ e(
|
94
|
-
|
93
|
+
U,
|
95
94
|
{
|
96
|
-
$
|
97
|
-
$
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
q,
|
95
|
+
$background: `${O}_2`,
|
96
|
+
$disabled: o,
|
97
|
+
onClick: M,
|
98
|
+
children: /* @__PURE__ */ d(
|
99
|
+
z,
|
102
100
|
{
|
103
101
|
renderAs: "primary",
|
104
|
-
tooltipItem:
|
102
|
+
tooltipItem: $,
|
105
103
|
position: "bottom",
|
106
104
|
zIndex: 5,
|
107
|
-
hidden:
|
105
|
+
hidden: !$,
|
108
106
|
parentWidth: "100%",
|
109
107
|
widthX: 11.25,
|
110
108
|
children: [
|
111
|
-
/* @__PURE__ */
|
112
|
-
|
109
|
+
/* @__PURE__ */ d(
|
110
|
+
V,
|
113
111
|
{
|
114
112
|
$flexDirection: "row",
|
115
113
|
$alignItems: "center",
|
116
114
|
$heightX: 3.5,
|
117
|
-
$bgImage:
|
115
|
+
$bgImage: w,
|
118
116
|
$gutterX: 0.78125,
|
119
117
|
$flexGap: 8.5,
|
120
|
-
$opacity:
|
121
|
-
onMouseEnter:
|
122
|
-
onMouseLeave:
|
118
|
+
$opacity: o ? 0.5 : 1,
|
119
|
+
onMouseEnter: W,
|
120
|
+
onMouseLeave: N,
|
123
121
|
children: [
|
124
|
-
/* @__PURE__ */
|
125
|
-
|
122
|
+
/* @__PURE__ */ d(
|
123
|
+
ee,
|
126
124
|
{
|
127
125
|
$width: 31,
|
128
126
|
$height: 31,
|
@@ -132,42 +130,41 @@ const le = { renderer: "canvas", autoplay: !1 }, Le = z((A) => {
|
|
132
130
|
$justifyContent: "center",
|
133
131
|
children: [
|
134
132
|
/* @__PURE__ */ e(
|
135
|
-
|
133
|
+
P,
|
136
134
|
{
|
137
|
-
src:
|
138
|
-
ref:
|
139
|
-
settings:
|
135
|
+
src: B,
|
136
|
+
ref: h,
|
137
|
+
settings: ie
|
140
138
|
}
|
141
139
|
),
|
142
|
-
!
|
140
|
+
!T && /* @__PURE__ */ e(te, {})
|
143
141
|
]
|
144
142
|
}
|
145
143
|
),
|
146
|
-
/* @__PURE__ */
|
147
|
-
|
144
|
+
/* @__PURE__ */ d(Y, { $renderAs: "ac4-black", $color: "BLACK", children: [
|
145
|
+
A,
|
148
146
|
" ",
|
149
147
|
v && "• CW"
|
150
|
-
] })
|
151
|
-
b && /* @__PURE__ */ e(J, { borderColor: "BLACK_1", borderWidth: 1 })
|
148
|
+
] })
|
152
149
|
]
|
153
150
|
}
|
154
151
|
),
|
155
152
|
/* @__PURE__ */ e(
|
156
|
-
|
153
|
+
oe,
|
157
154
|
{
|
158
|
-
nodeType:
|
159
|
-
state:
|
155
|
+
nodeType: l,
|
156
|
+
state: C,
|
160
157
|
accuracy: L,
|
161
|
-
isStudent:
|
158
|
+
isStudent: y
|
162
159
|
}
|
163
160
|
),
|
164
|
-
!
|
165
|
-
|
161
|
+
!R && /* @__PURE__ */ e(re, { $background: "WHITE_1", $heightX: 4, children: /* @__PURE__ */ e(
|
162
|
+
ne,
|
166
163
|
{
|
167
164
|
$renderAs: "ab3",
|
168
165
|
$color: "BLACK_1",
|
169
|
-
$opacity:
|
170
|
-
children:
|
166
|
+
$opacity: o ? 0.5 : 1,
|
167
|
+
children: E
|
171
168
|
}
|
172
169
|
) })
|
173
170
|
]
|
@@ -179,11 +176,11 @@ const le = { renderer: "canvas", autoplay: !1 }, Le = z((A) => {
|
|
179
176
|
menuWidth: "100%",
|
180
177
|
menuZIndex: 6,
|
181
178
|
menuOffset: 2,
|
182
|
-
menuElement: f ? /* @__PURE__ */ e(
|
179
|
+
menuElement: f ? /* @__PURE__ */ e(ae, { options: D }) : /* @__PURE__ */ e(H, {})
|
183
180
|
}
|
184
181
|
);
|
185
182
|
});
|
186
183
|
export {
|
187
|
-
|
184
|
+
be as default
|
188
185
|
};
|
189
186
|
//# sourceMappingURL=student-actions.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"student-actions.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/student-actions/student-actions.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { INodeCardProps } from '../node-card-types';\nimport type { INodeMenuOption } from '../node-menu-options/node-menu-options-types';\n\nimport { memo, useCallback, useRef, type FC } from 'react';\n\nimport Eye2Icon from '../../../../../assets/line-icons/icons/eye2';\nimport RedoIcon from '../../../../../assets/line-icons/icons/redo';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport BorderPathAnimation from '../../../../ui/border-path-animation/border-path-animation';\nimport ContextMenu from '../../../../ui/context-menu/context-menu';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport { BLOCK_TYPE } from '../../../constants/block-constants';\nimport { NODE_CARD_STATES } from '../../../constants/node-constants';\nimport { getNodeTypeBasedBgImage } from '../../../utils';\nimport { getNodeCardBasedIcon } from '../../../utils/node-card-utils';\nimport * as Styled from '../node-card-styled';\nimport NodeCardTags from '../node-card-tags';\nimport NodeMenuOptions from '../node-menu-options/node-menu-options';\n\nconst renderSettings = { renderer: 'canvas', autoplay: false };\n\nconst StudentActions: FC<Omit<INodeCardProps, 'userType'>> = memo(props => {\n const {\n nodeData,\n imageHue,\n blockType,\n onNodeAttempt,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n isStudent,\n } = props;\n const {\n accuracy,\n attempt_location: attemptLocation,\n node_type: nodeType,\n card_header: cardHeader,\n title,\n state,\n is_optional: isOptional,\n sheet_statement: sheetStatement,\n permissions,\n marked_as_completed: teacherMarkedAsCompleted,\n } = nodeData;\n const {\n can_review: canReview,\n can_start: canStart,\n can_resume: canResume,\n can_reset: canReset,\n } = permissions;\n\n const isGoalBlock = blockType === BLOCK_TYPE.GOAL;\n const sheetLocked = state === NODE_CARD_STATES.LOCKED;\n const sheetNotStarted = state === NODE_CARD_STATES.NOT_STARTED;\n const sheetInProgress = state === NODE_CARD_STATES.IN_PROGRESS;\n const inClassSheet = attemptLocation === 'INCLASS';\n const canStartOrResume = canStart || canResume;\n\n const showCardAnimation = !isOptional && (sheetInProgress || sheetNotStarted);\n const renderOptions = !canStartOrResume && (canReset || canReview);\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const nodeBgImage = getNodeTypeBasedBgImage(nodeType);\n const { lottie: nodeCardLottie } = getNodeCardBasedIcon(nodeType);\n\n const handleOnMenuOptionClick = useCallback(\n (optionId: string) => {\n switch (optionId) {\n case 'node-card-review':\n teacherMarkedAsCompleted ? onNodeView?.(nodeData) : onNodeReview?.(nodeData);\n\n return;\n\n case 'node-card-reattempt':\n onNodeReattempt?.(nodeData);\n\n return;\n\n default:\n throw new Error(`No callback function for ${optionId}`);\n }\n },\n [nodeData, onNodeReattempt, onNodeReview, onNodeView, teacherMarkedAsCompleted],\n );\n\n const handleOnNodeCardClick = useCallback(() => {\n if (renderOptions || sheetLocked) return;\n\n if (canStart || canResume) {\n onNodeAttempt?.(nodeData);\n } else if (teacherMarkedAsCompleted) {\n onNodeView?.(nodeData);\n }\n }, [\n canResume,\n canStart,\n nodeData,\n onNodeAttempt,\n onNodeView,\n renderOptions,\n sheetLocked,\n teacherMarkedAsCompleted,\n ]);\n\n const handleOnMouseEnter = useCallback(() => {\n if (sheetLocked) return;\n animationRef.current?.play();\n }, [sheetLocked]);\n\n const handleOnMouseLeave = useCallback(() => {\n animationRef.current?.stop();\n }, []);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-review',\n label: 'Review',\n icon: Eye2Icon,\n disabled: !canReview,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-reattempt',\n label: 'Reattempt',\n icon: RedoIcon,\n disabled: !canReset,\n onClick: handleOnMenuOptionClick,\n },\n ];\n\n return (\n <ContextMenu\n targetElement={\n <Styled.NodeCardContainer\n $showOutline={!showCardAnimation}\n $background={`${imageHue}_2`}\n $disabled={sheetLocked}\n onClick={handleOnNodeCardClick}\n >\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={sheetStatement}\n position=\"bottom\"\n zIndex={5}\n hidden={!sheetStatement}\n parentWidth=\"100%\"\n widthX={11.25}\n >\n <Styled.NodeCardInfoWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $heightX={3.5}\n $bgImage={nodeBgImage}\n $gutterX={0.78125}\n $flexGap={8.5}\n $opacity={sheetLocked ? 0.5 : 1}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n >\n <Styled.IconWrapper\n $width={31}\n $height={31}\n $background=\"WHITE_1\"\n $position=\"relative\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <LottieAnimation\n src={nodeCardLottie}\n ref={animationRef}\n settings={renderSettings}\n />\n {!isOptional && <Styled.StyledImportantIcon />}\n </Styled.IconWrapper>\n\n <Text $renderAs=\"ac4-black\" $color=\"BLACK\">\n {cardHeader} {inClassSheet && `• CW`}\n </Text>\n {showCardAnimation && <BorderPathAnimation borderColor=\"BLACK_1\" borderWidth={1} />}\n </Styled.NodeCardInfoWrapper>\n\n <NodeCardTags\n nodeType={nodeType}\n state={state}\n accuracy={accuracy}\n isStudent={isStudent}\n />\n\n {!isGoalBlock && (\n <Styled.NodeCardContentWrapper $background=\"WHITE_1\" $heightX={4}>\n <Styled.NodeCardTitle\n $renderAs=\"ab3\"\n $color=\"BLACK_1\"\n $opacity={sheetLocked ? 0.5 : 1}\n >\n {title}\n </Styled.NodeCardTitle>\n </Styled.NodeCardContentWrapper>\n )}\n </ArrowTooltip>\n </Styled.NodeCardContainer>\n }\n startLeft\n menuWidth=\"100%\"\n menuZIndex={6}\n menuOffset={2}\n menuElement={renderOptions ? <NodeMenuOptions options={menuOptions} /> : <></>}\n />\n );\n});\n\nexport default StudentActions;\n"],"names":["renderSettings","StudentActions","memo","props","nodeData","imageHue","blockType","onNodeAttempt","onNodeReattempt","onNodeReview","onNodeView","isStudent","accuracy","attemptLocation","nodeType","cardHeader","title","state","isOptional","sheetStatement","permissions","teacherMarkedAsCompleted","canReview","canStart","canResume","canReset","isGoalBlock","BLOCK_TYPE","sheetLocked","NODE_CARD_STATES","sheetNotStarted","sheetInProgress","inClassSheet","canStartOrResume","showCardAnimation","renderOptions","animationRef","useRef","nodeBgImage","getNodeTypeBasedBgImage","nodeCardLottie","getNodeCardBasedIcon","handleOnMenuOptionClick","useCallback","optionId","handleOnNodeCardClick","handleOnMouseEnter","_a","handleOnMouseLeave","menuOptions","Eye2Icon","RedoIcon","jsx","ContextMenu","Styled.NodeCardContainer","jsxs","ArrowTooltip","Styled.NodeCardInfoWrapper","Styled.IconWrapper","LottieAnimation","Styled.StyledImportantIcon","Text","BorderPathAnimation","NodeCardTags","Styled.NodeCardContentWrapper","Styled.NodeCardTitle","NodeMenuOptions","Fragment"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"student-actions.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/student-actions/student-actions.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { INodeCardProps } from '../node-card-types';\nimport type { INodeMenuOption } from '../node-menu-options/node-menu-options-types';\n\nimport { memo, useCallback, useRef, type FC } from 'react';\n\nimport Eye2Icon from '../../../../../assets/line-icons/icons/eye2';\nimport RedoIcon from '../../../../../assets/line-icons/icons/redo';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport ContextMenu from '../../../../ui/context-menu/context-menu';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport { BLOCK_TYPE } from '../../../constants/block-constants';\nimport { NODE_CARD_STATES } from '../../../constants/node-constants';\nimport { getNodeTypeBasedBgImage } from '../../../utils';\nimport { getNodeCardBasedIcon } from '../../../utils/node-card-utils';\nimport * as Styled from '../node-card-styled';\nimport NodeCardTags from '../node-card-tags';\nimport NodeMenuOptions from '../node-menu-options/node-menu-options';\n\nconst renderSettings = { renderer: 'canvas', autoplay: false };\n\nconst StudentActions: FC<Omit<INodeCardProps, 'userType'>> = memo(props => {\n const {\n nodeData,\n imageHue,\n blockType,\n onNodeAttempt,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n isStudent,\n } = props;\n const {\n accuracy,\n attempt_location: attemptLocation,\n node_type: nodeType,\n card_header: cardHeader,\n title,\n state,\n is_optional: isOptional,\n sheet_statement: sheetStatement,\n permissions,\n marked_as_completed: teacherMarkedAsCompleted,\n } = nodeData;\n const {\n can_review: canReview,\n can_start: canStart,\n can_resume: canResume,\n can_reset: canReset,\n } = permissions;\n\n const isGoalBlock = blockType === BLOCK_TYPE.GOAL;\n const sheetLocked = state === NODE_CARD_STATES.LOCKED;\n const inClassSheet = attemptLocation === 'INCLASS';\n const canStartOrResume = canStart || canResume;\n\n const renderOptions = !canStartOrResume && (canReset || canReview);\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const nodeBgImage = getNodeTypeBasedBgImage(nodeType);\n const { lottie: nodeCardLottie } = getNodeCardBasedIcon(nodeType);\n\n const handleOnMenuOptionClick = useCallback(\n (optionId: string) => {\n switch (optionId) {\n case 'node-card-review':\n teacherMarkedAsCompleted ? onNodeView?.(nodeData) : onNodeReview?.(nodeData);\n\n return;\n\n case 'node-card-reattempt':\n onNodeReattempt?.(nodeData);\n\n return;\n\n default:\n throw new Error(`No callback function for ${optionId}`);\n }\n },\n [nodeData, onNodeReattempt, onNodeReview, onNodeView, teacherMarkedAsCompleted],\n );\n\n const handleOnNodeCardClick = useCallback(() => {\n if (renderOptions || sheetLocked) return;\n\n if (canStart || canResume) {\n onNodeAttempt?.(nodeData);\n } else if (teacherMarkedAsCompleted) {\n onNodeView?.(nodeData);\n }\n }, [\n canResume,\n canStart,\n nodeData,\n onNodeAttempt,\n onNodeView,\n renderOptions,\n sheetLocked,\n teacherMarkedAsCompleted,\n ]);\n\n const handleOnMouseEnter = useCallback(() => {\n if (sheetLocked) return;\n animationRef.current?.play();\n }, [sheetLocked]);\n\n const handleOnMouseLeave = useCallback(() => {\n animationRef.current?.stop();\n }, []);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-review',\n label: 'Review',\n icon: Eye2Icon,\n disabled: !canReview,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-reattempt',\n label: 'Reattempt',\n icon: RedoIcon,\n disabled: !canReset,\n onClick: handleOnMenuOptionClick,\n },\n ];\n\n return (\n <ContextMenu\n targetElement={\n <Styled.NodeCardContainer\n $background={`${imageHue}_2`}\n $disabled={sheetLocked}\n onClick={handleOnNodeCardClick}\n >\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={sheetStatement}\n position=\"bottom\"\n zIndex={5}\n hidden={!sheetStatement}\n parentWidth=\"100%\"\n widthX={11.25}\n >\n <Styled.NodeCardInfoWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $heightX={3.5}\n $bgImage={nodeBgImage}\n $gutterX={0.78125}\n $flexGap={8.5}\n $opacity={sheetLocked ? 0.5 : 1}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n >\n <Styled.IconWrapper\n $width={31}\n $height={31}\n $background=\"WHITE_1\"\n $position=\"relative\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <LottieAnimation\n src={nodeCardLottie}\n ref={animationRef}\n settings={renderSettings}\n />\n {!isOptional && <Styled.StyledImportantIcon />}\n </Styled.IconWrapper>\n\n <Text $renderAs=\"ac4-black\" $color=\"BLACK\">\n {cardHeader} {inClassSheet && `• CW`}\n </Text>\n </Styled.NodeCardInfoWrapper>\n\n <NodeCardTags\n nodeType={nodeType}\n state={state}\n accuracy={accuracy}\n isStudent={isStudent}\n />\n\n {!isGoalBlock && (\n <Styled.NodeCardContentWrapper $background=\"WHITE_1\" $heightX={4}>\n <Styled.NodeCardTitle\n $renderAs=\"ab3\"\n $color=\"BLACK_1\"\n $opacity={sheetLocked ? 0.5 : 1}\n >\n {title}\n </Styled.NodeCardTitle>\n </Styled.NodeCardContentWrapper>\n )}\n </ArrowTooltip>\n </Styled.NodeCardContainer>\n }\n startLeft\n menuWidth=\"100%\"\n menuZIndex={6}\n menuOffset={2}\n menuElement={renderOptions ? <NodeMenuOptions options={menuOptions} /> : <></>}\n />\n );\n});\n\nexport default StudentActions;\n"],"names":["renderSettings","StudentActions","memo","props","nodeData","imageHue","blockType","onNodeAttempt","onNodeReattempt","onNodeReview","onNodeView","isStudent","accuracy","attemptLocation","nodeType","cardHeader","title","state","isOptional","sheetStatement","permissions","teacherMarkedAsCompleted","canReview","canStart","canResume","canReset","isGoalBlock","BLOCK_TYPE","sheetLocked","NODE_CARD_STATES","inClassSheet","renderOptions","animationRef","useRef","nodeBgImage","getNodeTypeBasedBgImage","nodeCardLottie","getNodeCardBasedIcon","handleOnMenuOptionClick","useCallback","optionId","handleOnNodeCardClick","handleOnMouseEnter","_a","handleOnMouseLeave","menuOptions","Eye2Icon","RedoIcon","jsx","ContextMenu","Styled.NodeCardContainer","jsxs","ArrowTooltip","Styled.NodeCardInfoWrapper","Styled.IconWrapper","LottieAnimation","Styled.StyledImportantIcon","Text","NodeCardTags","Styled.NodeCardContentWrapper","Styled.NodeCardTitle","NodeMenuOptions","Fragment"],"mappings":"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"}
|
@@ -1,208 +1,197 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { memo as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
8
|
-
import
|
9
|
-
import
|
10
|
-
import
|
11
|
-
import
|
12
|
-
import
|
13
|
-
import
|
14
|
-
import {
|
15
|
-
import {
|
16
|
-
import {
|
17
|
-
import {
|
18
|
-
import
|
19
|
-
import
|
20
|
-
|
21
|
-
const $e = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: _e, REVIEW: Ie, VIEW: be, MARK_AS_DONE: ge, RESET: Ee } = oe, Fe = q(
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
2
|
+
import { memo as P, useRef as g, useCallback as C } from "react";
|
3
|
+
import R from "../../../../../assets/line-icons/icons/check2.js";
|
4
|
+
import U from "../../../../../assets/line-icons/icons/eye2.js";
|
5
|
+
import Y from "../../../../../assets/line-icons/icons/home2.js";
|
6
|
+
import E from "../../../../../assets/line-icons/icons/more-vertical.js";
|
7
|
+
import q from "../../../../../assets/line-icons/icons/redo.js";
|
8
|
+
import J from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
|
9
|
+
import Q from "../../../../ui/hooks/use-context-menu-click-handler.js";
|
10
|
+
import V from "../../../../ui/layout/flex-view.js";
|
11
|
+
import Z from "../../../../ui/lottie-animation/lottie-animation.js";
|
12
|
+
import D from "../../../../ui/text/text.js";
|
13
|
+
import { BLOCK_TYPE as N } from "../../../constants/block-constants.js";
|
14
|
+
import { NODE_CARD_STATES as ee, TEACHER_MENU_LABELS as re } from "../../../constants/node-constants.js";
|
15
|
+
import { getNodeTypeBasedBgImage as te } from "../../../utils/index.js";
|
16
|
+
import { getNodeCardBasedIcon as ne } from "../../../utils/node-card-utils.js";
|
17
|
+
import { NodeCardContainer as ie, NodeCardInfoWrapper as ce, IconWrapper as ae, StyledImportantIcon as oe, NodeKebabMenuWrapper as y, NodeCardContentWrapper as le, NodeCardTitle as se, NodeMenuOptionsWrapper as de } from "../node-card-styled.js";
|
18
|
+
import me from "../node-card-tags.js";
|
19
|
+
import pe from "../node-menu-options/node-menu-options.js";
|
20
|
+
const he = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: fe, REVIEW: ue, VIEW: Ce, MARK_AS_DONE: $e, RESET: _e } = re, ve = P(
|
22
21
|
({
|
23
22
|
nodeData: t,
|
24
|
-
imageHue:
|
25
|
-
blockType:
|
26
|
-
isSkipped:
|
27
|
-
onNodeAssignAsHomework:
|
28
|
-
onNodeMarkAsDone:
|
29
|
-
onNodeView:
|
30
|
-
onNodeReview:
|
31
|
-
onNodeReattempt:
|
23
|
+
imageHue: L,
|
24
|
+
blockType: S,
|
25
|
+
isSkipped: T,
|
26
|
+
onNodeAssignAsHomework: c,
|
27
|
+
onNodeMarkAsDone: a,
|
28
|
+
onNodeView: o,
|
29
|
+
onNodeReview: l,
|
30
|
+
onNodeReattempt: s
|
32
31
|
}) => {
|
33
|
-
const
|
34
|
-
accuracy:
|
35
|
-
attempt_location:
|
36
|
-
node_type:
|
37
|
-
card_header:
|
38
|
-
title:
|
39
|
-
state:
|
40
|
-
is_optional:
|
41
|
-
sheet_statement:
|
42
|
-
permissions:
|
43
|
-
user_attempt_id:
|
44
|
-
} = t, { lottie:
|
45
|
-
can_mark_familiar:
|
46
|
-
can_review:
|
47
|
-
can_assign_as_homework:
|
48
|
-
can_reset:
|
49
|
-
} =
|
32
|
+
const m = g(null), { menuVisible: k, onMenuClick: $ } = Q(m), {
|
33
|
+
accuracy: O,
|
34
|
+
attempt_location: x,
|
35
|
+
node_type: p,
|
36
|
+
card_header: W,
|
37
|
+
title: B,
|
38
|
+
state: _,
|
39
|
+
is_optional: M,
|
40
|
+
sheet_statement: I,
|
41
|
+
permissions: w,
|
42
|
+
user_attempt_id: h
|
43
|
+
} = t, { lottie: A } = ne(p), f = g(null), {
|
44
|
+
can_mark_familiar: K,
|
45
|
+
can_review: u,
|
46
|
+
can_assign_as_homework: G,
|
47
|
+
can_reset: j
|
48
|
+
} = w, b = S === N.GOAL, i = _ === ee.LOCKED, v = x === "INCLASS", X = te(p), d = C(
|
50
49
|
(r) => {
|
51
50
|
switch (r) {
|
52
51
|
case "node-card-view":
|
53
|
-
|
52
|
+
u && h ? l == null || l(t) : o == null || o(t);
|
54
53
|
return;
|
55
54
|
case "node-card-assign-as-hw":
|
56
|
-
|
55
|
+
c == null || c(t);
|
57
56
|
return;
|
58
57
|
case "node-card-mark-as-done":
|
59
|
-
|
58
|
+
a == null || a(t);
|
60
59
|
return;
|
61
60
|
case "node-card-reset":
|
62
|
-
|
61
|
+
s == null || s(t);
|
63
62
|
return;
|
64
63
|
default:
|
65
64
|
throw new Error(`No callback function for ${r}`);
|
66
65
|
}
|
67
66
|
},
|
68
67
|
[
|
69
|
-
|
68
|
+
u,
|
70
69
|
t,
|
71
|
-
o,
|
72
70
|
c,
|
73
|
-
l,
|
74
|
-
s,
|
75
71
|
a,
|
76
|
-
|
72
|
+
s,
|
73
|
+
l,
|
74
|
+
o,
|
75
|
+
h
|
77
76
|
]
|
78
|
-
),
|
77
|
+
), H = C(() => {
|
79
78
|
var r;
|
80
|
-
|
81
|
-
}, [
|
79
|
+
i || (r = f.current) == null || r.play();
|
80
|
+
}, [i]), F = C(() => {
|
82
81
|
var r;
|
83
|
-
(r =
|
84
|
-
}, []),
|
82
|
+
(r = f.current) == null || r.stop();
|
83
|
+
}, []), z = [
|
85
84
|
{
|
86
85
|
id: "node-card-view",
|
87
|
-
label:
|
88
|
-
icon:
|
86
|
+
label: u && h ? ue : Ce,
|
87
|
+
icon: U,
|
89
88
|
disabled: !1,
|
90
|
-
onClick:
|
89
|
+
onClick: d
|
91
90
|
},
|
92
91
|
{
|
93
92
|
id: "node-card-assign-as-hw",
|
94
|
-
label:
|
95
|
-
icon:
|
96
|
-
disabled: !
|
97
|
-
onClick:
|
93
|
+
label: fe,
|
94
|
+
icon: Y,
|
95
|
+
disabled: !G,
|
96
|
+
onClick: d
|
98
97
|
},
|
99
98
|
{
|
100
99
|
id: "node-card-reset",
|
101
|
-
label:
|
102
|
-
icon:
|
103
|
-
disabled: !
|
104
|
-
onClick:
|
100
|
+
label: _e,
|
101
|
+
icon: q,
|
102
|
+
disabled: !j,
|
103
|
+
onClick: d
|
105
104
|
},
|
106
105
|
{
|
107
106
|
id: "node-card-mark-as-done",
|
108
|
-
label:
|
109
|
-
icon:
|
110
|
-
disabled: !
|
111
|
-
onClick:
|
107
|
+
label: $e,
|
108
|
+
icon: R,
|
109
|
+
disabled: !K,
|
110
|
+
onClick: d
|
112
111
|
}
|
113
112
|
];
|
114
|
-
return /* @__PURE__ */
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
]
|
194
|
-
}
|
195
|
-
)
|
196
|
-
]
|
197
|
-
}
|
198
|
-
),
|
199
|
-
/* @__PURE__ */ e(fe, { $visible: x, children: /* @__PURE__ */ e(Ce, { options: Y }) })
|
200
|
-
]
|
201
|
-
}
|
202
|
-
);
|
113
|
+
return /* @__PURE__ */ n(ie, { $background: `${L}_2`, $disabled: !!T, children: [
|
114
|
+
/* @__PURE__ */ n(
|
115
|
+
J,
|
116
|
+
{
|
117
|
+
renderAs: "primary",
|
118
|
+
tooltipItem: I,
|
119
|
+
position: "bottom",
|
120
|
+
zIndex: 5,
|
121
|
+
hidden: !I,
|
122
|
+
parentWidth: "100%",
|
123
|
+
widthX: 11.25,
|
124
|
+
children: [
|
125
|
+
/* @__PURE__ */ n(
|
126
|
+
ce,
|
127
|
+
{
|
128
|
+
$flexDirection: "row",
|
129
|
+
$alignItems: "center",
|
130
|
+
$width: "100%",
|
131
|
+
$heightX: 3.5,
|
132
|
+
$bgImage: X,
|
133
|
+
$gutterX: 0.78125,
|
134
|
+
$flexGap: 8.5,
|
135
|
+
onMouseEnter: H,
|
136
|
+
onMouseLeave: F,
|
137
|
+
children: [
|
138
|
+
/* @__PURE__ */ n(
|
139
|
+
ae,
|
140
|
+
{
|
141
|
+
$width: 31,
|
142
|
+
$height: 31,
|
143
|
+
$background: "WHITE_1",
|
144
|
+
$position: "relative",
|
145
|
+
$alignItems: "center",
|
146
|
+
$justifyContent: "center",
|
147
|
+
$opacity: i ? 0.5 : 1,
|
148
|
+
children: [
|
149
|
+
/* @__PURE__ */ e(Z, { src: A, ref: f, settings: he }),
|
150
|
+
!M && /* @__PURE__ */ e(oe, {})
|
151
|
+
]
|
152
|
+
}
|
153
|
+
),
|
154
|
+
/* @__PURE__ */ n(D, { $renderAs: "ac4-black", $color: "BLACK", $opacity: i ? 0.5 : 1, children: [
|
155
|
+
W,
|
156
|
+
" ",
|
157
|
+
v && "• CW"
|
158
|
+
] }),
|
159
|
+
/* @__PURE__ */ e(V, { className: "context-menu", children: b && /* @__PURE__ */ e(y, { ref: m, onClick: $, children: /* @__PURE__ */ e(E, { width: 16, height: 16 }) }) })
|
160
|
+
]
|
161
|
+
}
|
162
|
+
),
|
163
|
+
/* @__PURE__ */ e(me, { nodeType: p, state: _, accuracy: O }),
|
164
|
+
!b && /* @__PURE__ */ n(
|
165
|
+
le,
|
166
|
+
{
|
167
|
+
$flexDirection: "row",
|
168
|
+
$alignItems: "center",
|
169
|
+
$background: "WHITE_1",
|
170
|
+
$flexGap: 8,
|
171
|
+
$heightX: 4,
|
172
|
+
$justifyContent: "space-between",
|
173
|
+
children: [
|
174
|
+
/* @__PURE__ */ e(
|
175
|
+
se,
|
176
|
+
{
|
177
|
+
$renderAs: "ab3",
|
178
|
+
$color: "BLACK_1",
|
179
|
+
$opacity: i ? 0.5 : 1,
|
180
|
+
children: B
|
181
|
+
}
|
182
|
+
),
|
183
|
+
/* @__PURE__ */ e(y, { ref: m, onClick: $, children: /* @__PURE__ */ e(E, { width: 16, height: 16 }) })
|
184
|
+
]
|
185
|
+
}
|
186
|
+
)
|
187
|
+
]
|
188
|
+
}
|
189
|
+
),
|
190
|
+
/* @__PURE__ */ e(de, { $visible: k, children: /* @__PURE__ */ e(pe, { options: z }) })
|
191
|
+
] });
|
203
192
|
}
|
204
193
|
);
|
205
194
|
export {
|
206
|
-
|
195
|
+
ve as default
|
207
196
|
};
|
208
197
|
//# sourceMappingURL=teacher-actions.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"teacher-actions.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { INodeCardProps } from '../node-card-types';\nimport type { INodeMenuOption } from '../node-menu-options/node-menu-options-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useRef } from 'react';\n\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport Eye2Icon from '../../../../../assets/line-icons/icons/eye2';\nimport Home2Icon from '../../../../../assets/line-icons/icons/home2';\nimport MoreVerticalIcon from '../../../../../assets/line-icons/icons/more-vertical';\nimport RedoIcon from '../../../../../assets/line-icons/icons/redo';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport BorderPathAnimation from '../../../../ui/border-path-animation/border-path-animation';\nimport useContextMenuClickHandler from '../../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport { BLOCK_TYPE } from '../../../constants/block-constants';\nimport { NODE_CARD_STATES, TEACHER_MENU_LABELS } from '../../../constants/node-constants';\nimport { getNodeTypeBasedBgImage } from '../../../utils';\nimport { getNodeCardBasedIcon } from '../../../utils/node-card-utils';\nimport * as Styled from '../node-card-styled';\nimport NodeCardTags from '../node-card-tags';\nimport NodeMenuOptions from '../node-menu-options/node-menu-options';\n\nconst renderSettings = { renderer: 'canvas', autoplay: false };\nconst { ASSIGN_AS_HW, REVIEW, VIEW, MARK_AS_DONE, RESET } = TEACHER_MENU_LABELS;\n\nconst TeacherActions: FC<Omit<INodeCardProps, 'userType'>> = memo(\n ({\n nodeData,\n imageHue,\n blockType,\n isSkipped,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeView,\n onNodeReview,\n onNodeReattempt,\n }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(containerRef);\n\n const {\n accuracy,\n attempt_location: attemptLocation,\n node_type: nodeType,\n card_header: cardHeader,\n title,\n state,\n is_optional: isOptional,\n sheet_statement: sheetStatement,\n permissions,\n user_attempt_id: userAttemptId,\n } = nodeData;\n\n const { lottie: nodeCardLottie } = getNodeCardBasedIcon(nodeType);\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n\n const {\n can_mark_familiar: canMarkFamiliar,\n can_review: canReview,\n can_assign_as_homework: canAssignAsHw,\n can_reset: canReset,\n } = permissions;\n\n const isGoalBlock = blockType === BLOCK_TYPE.GOAL;\n const sheetLocked = state === NODE_CARD_STATES.LOCKED;\n const sheetNotStarted = state === NODE_CARD_STATES.NOT_STARTED;\n const sheetInProgress = state === NODE_CARD_STATES.IN_PROGRESS;\n const inClassSheet = attemptLocation === 'INCLASS';\n\n const showCardAnimation = !isOptional && (sheetInProgress || sheetNotStarted);\n\n const nodeBgImage = getNodeTypeBasedBgImage(nodeType);\n\n const handleOnMenuOptionClick = useCallback(\n (optionId: string) => {\n switch (optionId) {\n case 'node-card-view':\n if (canReview && userAttemptId) {\n onNodeReview?.(nodeData);\n } else {\n onNodeView?.(nodeData);\n }\n\n return;\n\n case 'node-card-assign-as-hw':\n onNodeAssignAsHomework?.(nodeData);\n\n return;\n\n case 'node-card-mark-as-done':\n onNodeMarkAsDone?.(nodeData);\n\n return;\n\n case 'node-card-reset':\n onNodeReattempt?.(nodeData);\n\n return;\n\n default:\n throw new Error(`No callback function for ${optionId}`);\n }\n },\n [\n canReview,\n nodeData,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n userAttemptId,\n ],\n );\n\n const handleOnMouseEnter = useCallback(() => {\n if (sheetLocked) return;\n animationRef.current?.play();\n }, [sheetLocked]);\n\n const handleOnMouseLeave = useCallback(() => {\n animationRef.current?.stop();\n }, []);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-view',\n label: canReview && userAttemptId ? REVIEW : VIEW,\n icon: Eye2Icon,\n disabled: false,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-assign-as-hw',\n label: ASSIGN_AS_HW,\n icon: Home2Icon,\n disabled: !canAssignAsHw,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-reset',\n label: RESET,\n icon: RedoIcon,\n disabled: !canReset,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-mark-as-done',\n label: MARK_AS_DONE,\n icon: Check2Icon,\n disabled: !canMarkFamiliar,\n onClick: handleOnMenuOptionClick,\n },\n ];\n\n return (\n <Styled.NodeCardContainer\n $showOutline={!showCardAnimation}\n $isSheetLocked={sheetLocked}\n $background={`${imageHue}_2`}\n $disabled={Boolean(isSkipped)}\n >\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={sheetStatement}\n position=\"bottom\"\n zIndex={5}\n hidden={!sheetStatement}\n parentWidth=\"100%\"\n widthX={11.25}\n >\n <Styled.NodeCardInfoWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $width=\"100%\"\n $heightX={3.5}\n $bgImage={nodeBgImage}\n $gutterX={0.78125}\n $flexGap={8.5}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n >\n <Styled.IconWrapper\n $width={31}\n $height={31}\n $background=\"WHITE_1\"\n $position=\"relative\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $opacity={sheetLocked ? 0.5 : 1}\n >\n <LottieAnimation src={nodeCardLottie} ref={animationRef} settings={renderSettings} />\n {!isOptional && <Styled.StyledImportantIcon />}\n </Styled.IconWrapper>\n\n <Text $renderAs=\"ac4-black\" $color=\"BLACK\" $opacity={sheetLocked ? 0.5 : 1}>\n {cardHeader} {inClassSheet && `• CW`}\n </Text>\n\n <FlexView className=\"context-menu\">\n {isGoalBlock && (\n <Styled.NodeKebabMenuWrapper ref={containerRef} onClick={onMenuClick}>\n <MoreVerticalIcon width={16} height={16} />\n </Styled.NodeKebabMenuWrapper>\n )}\n </FlexView>\n\n {showCardAnimation && !isSkipped && (\n <BorderPathAnimation borderColor=\"BLACK_1\" borderWidth={1} />\n )}\n </Styled.NodeCardInfoWrapper>\n\n <NodeCardTags nodeType={nodeType} state={state} accuracy={accuracy} />\n\n {!isGoalBlock && (\n <Styled.NodeCardContentWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $background=\"WHITE_1\"\n $flexGap={8}\n $heightX={4}\n $justifyContent=\"space-between\"\n >\n <Styled.NodeCardTitle\n $renderAs=\"ab3\"\n $color=\"BLACK_1\"\n $opacity={sheetLocked ? 0.5 : 1}\n >\n {title}\n </Styled.NodeCardTitle>\n\n <Styled.NodeKebabMenuWrapper ref={containerRef} onClick={onMenuClick}>\n <MoreVerticalIcon width={16} height={16} />\n </Styled.NodeKebabMenuWrapper>\n </Styled.NodeCardContentWrapper>\n )}\n </ArrowTooltip>\n\n <Styled.NodeMenuOptionsWrapper $visible={menuVisible}>\n <NodeMenuOptions options={menuOptions} />\n </Styled.NodeMenuOptionsWrapper>\n </Styled.NodeCardContainer>\n );\n },\n);\n\nexport default TeacherActions;\n"],"names":["renderSettings","ASSIGN_AS_HW","REVIEW","VIEW","MARK_AS_DONE","RESET","TEACHER_MENU_LABELS","TeacherActions","memo","nodeData","imageHue","blockType","isSkipped","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeView","onNodeReview","onNodeReattempt","containerRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","accuracy","attemptLocation","nodeType","cardHeader","title","state","isOptional","sheetStatement","permissions","userAttemptId","nodeCardLottie","getNodeCardBasedIcon","animationRef","canMarkFamiliar","canReview","canAssignAsHw","canReset","isGoalBlock","BLOCK_TYPE","sheetLocked","NODE_CARD_STATES","sheetNotStarted","sheetInProgress","inClassSheet","showCardAnimation","nodeBgImage","getNodeTypeBasedBgImage","handleOnMenuOptionClick","useCallback","optionId","handleOnMouseEnter","_a","handleOnMouseLeave","menuOptions","Eye2Icon","Home2Icon","RedoIcon","Check2Icon","jsxs","Styled.NodeCardContainer","ArrowTooltip","Styled.NodeCardInfoWrapper","Styled.IconWrapper","jsx","LottieAnimation","Styled.StyledImportantIcon","Text","FlexView","Styled.NodeKebabMenuWrapper","MoreVerticalIcon","BorderPathAnimation","NodeCardTags","Styled.NodeCardContentWrapper","Styled.NodeCardTitle","Styled.NodeMenuOptionsWrapper","NodeMenuOptions"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"teacher-actions.js","sources":["../../../../../../src/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { INodeCardProps } from '../node-card-types';\nimport type { INodeMenuOption } from '../node-menu-options/node-menu-options-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useRef } from 'react';\n\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport Eye2Icon from '../../../../../assets/line-icons/icons/eye2';\nimport Home2Icon from '../../../../../assets/line-icons/icons/home2';\nimport MoreVerticalIcon from '../../../../../assets/line-icons/icons/more-vertical';\nimport RedoIcon from '../../../../../assets/line-icons/icons/redo';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport useContextMenuClickHandler from '../../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../../ui/text/text';\nimport { BLOCK_TYPE } from '../../../constants/block-constants';\nimport { NODE_CARD_STATES, TEACHER_MENU_LABELS } from '../../../constants/node-constants';\nimport { getNodeTypeBasedBgImage } from '../../../utils';\nimport { getNodeCardBasedIcon } from '../../../utils/node-card-utils';\nimport * as Styled from '../node-card-styled';\nimport NodeCardTags from '../node-card-tags';\nimport NodeMenuOptions from '../node-menu-options/node-menu-options';\n\nconst renderSettings = { renderer: 'canvas', autoplay: false };\nconst { ASSIGN_AS_HW, REVIEW, VIEW, MARK_AS_DONE, RESET } = TEACHER_MENU_LABELS;\n\nconst TeacherActions: FC<Omit<INodeCardProps, 'userType'>> = memo(\n ({\n nodeData,\n imageHue,\n blockType,\n isSkipped,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeView,\n onNodeReview,\n onNodeReattempt,\n }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(containerRef);\n\n const {\n accuracy,\n attempt_location: attemptLocation,\n node_type: nodeType,\n card_header: cardHeader,\n title,\n state,\n is_optional: isOptional,\n sheet_statement: sheetStatement,\n permissions,\n user_attempt_id: userAttemptId,\n } = nodeData;\n\n const { lottie: nodeCardLottie } = getNodeCardBasedIcon(nodeType);\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n\n const {\n can_mark_familiar: canMarkFamiliar,\n can_review: canReview,\n can_assign_as_homework: canAssignAsHw,\n can_reset: canReset,\n } = permissions;\n\n const isGoalBlock = blockType === BLOCK_TYPE.GOAL;\n const sheetLocked = state === NODE_CARD_STATES.LOCKED;\n const inClassSheet = attemptLocation === 'INCLASS';\n\n const nodeBgImage = getNodeTypeBasedBgImage(nodeType);\n\n const handleOnMenuOptionClick = useCallback(\n (optionId: string) => {\n switch (optionId) {\n case 'node-card-view':\n if (canReview && userAttemptId) {\n onNodeReview?.(nodeData);\n } else {\n onNodeView?.(nodeData);\n }\n\n return;\n\n case 'node-card-assign-as-hw':\n onNodeAssignAsHomework?.(nodeData);\n\n return;\n\n case 'node-card-mark-as-done':\n onNodeMarkAsDone?.(nodeData);\n\n return;\n\n case 'node-card-reset':\n onNodeReattempt?.(nodeData);\n\n return;\n\n default:\n throw new Error(`No callback function for ${optionId}`);\n }\n },\n [\n canReview,\n nodeData,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n userAttemptId,\n ],\n );\n\n const handleOnMouseEnter = useCallback(() => {\n if (sheetLocked) return;\n animationRef.current?.play();\n }, [sheetLocked]);\n\n const handleOnMouseLeave = useCallback(() => {\n animationRef.current?.stop();\n }, []);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-view',\n label: canReview && userAttemptId ? REVIEW : VIEW,\n icon: Eye2Icon,\n disabled: false,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-assign-as-hw',\n label: ASSIGN_AS_HW,\n icon: Home2Icon,\n disabled: !canAssignAsHw,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-reset',\n label: RESET,\n icon: RedoIcon,\n disabled: !canReset,\n onClick: handleOnMenuOptionClick,\n },\n {\n id: 'node-card-mark-as-done',\n label: MARK_AS_DONE,\n icon: Check2Icon,\n disabled: !canMarkFamiliar,\n onClick: handleOnMenuOptionClick,\n },\n ];\n\n return (\n <Styled.NodeCardContainer $background={`${imageHue}_2`} $disabled={Boolean(isSkipped)}>\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={sheetStatement}\n position=\"bottom\"\n zIndex={5}\n hidden={!sheetStatement}\n parentWidth=\"100%\"\n widthX={11.25}\n >\n <Styled.NodeCardInfoWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $width=\"100%\"\n $heightX={3.5}\n $bgImage={nodeBgImage}\n $gutterX={0.78125}\n $flexGap={8.5}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\n >\n <Styled.IconWrapper\n $width={31}\n $height={31}\n $background=\"WHITE_1\"\n $position=\"relative\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $opacity={sheetLocked ? 0.5 : 1}\n >\n <LottieAnimation src={nodeCardLottie} ref={animationRef} settings={renderSettings} />\n {!isOptional && <Styled.StyledImportantIcon />}\n </Styled.IconWrapper>\n\n <Text $renderAs=\"ac4-black\" $color=\"BLACK\" $opacity={sheetLocked ? 0.5 : 1}>\n {cardHeader} {inClassSheet && `• CW`}\n </Text>\n\n <FlexView className=\"context-menu\">\n {isGoalBlock && (\n <Styled.NodeKebabMenuWrapper ref={containerRef} onClick={onMenuClick}>\n <MoreVerticalIcon width={16} height={16} />\n </Styled.NodeKebabMenuWrapper>\n )}\n </FlexView>\n </Styled.NodeCardInfoWrapper>\n\n <NodeCardTags nodeType={nodeType} state={state} accuracy={accuracy} />\n\n {!isGoalBlock && (\n <Styled.NodeCardContentWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $background=\"WHITE_1\"\n $flexGap={8}\n $heightX={4}\n $justifyContent=\"space-between\"\n >\n <Styled.NodeCardTitle\n $renderAs=\"ab3\"\n $color=\"BLACK_1\"\n $opacity={sheetLocked ? 0.5 : 1}\n >\n {title}\n </Styled.NodeCardTitle>\n\n <Styled.NodeKebabMenuWrapper ref={containerRef} onClick={onMenuClick}>\n <MoreVerticalIcon width={16} height={16} />\n </Styled.NodeKebabMenuWrapper>\n </Styled.NodeCardContentWrapper>\n )}\n </ArrowTooltip>\n\n <Styled.NodeMenuOptionsWrapper $visible={menuVisible}>\n <NodeMenuOptions options={menuOptions} />\n </Styled.NodeMenuOptionsWrapper>\n </Styled.NodeCardContainer>\n );\n },\n);\n\nexport default TeacherActions;\n"],"names":["renderSettings","ASSIGN_AS_HW","REVIEW","VIEW","MARK_AS_DONE","RESET","TEACHER_MENU_LABELS","TeacherActions","memo","nodeData","imageHue","blockType","isSkipped","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeView","onNodeReview","onNodeReattempt","containerRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","accuracy","attemptLocation","nodeType","cardHeader","title","state","isOptional","sheetStatement","permissions","userAttemptId","nodeCardLottie","getNodeCardBasedIcon","animationRef","canMarkFamiliar","canReview","canAssignAsHw","canReset","isGoalBlock","BLOCK_TYPE","sheetLocked","NODE_CARD_STATES","inClassSheet","nodeBgImage","getNodeTypeBasedBgImage","handleOnMenuOptionClick","useCallback","optionId","handleOnMouseEnter","_a","handleOnMouseLeave","menuOptions","Eye2Icon","Home2Icon","RedoIcon","Check2Icon","jsxs","Styled.NodeCardContainer","ArrowTooltip","Styled.NodeCardInfoWrapper","Styled.IconWrapper","jsx","LottieAnimation","Styled.StyledImportantIcon","Text","FlexView","Styled.NodeKebabMenuWrapper","MoreVerticalIcon","NodeCardTags","Styled.NodeCardContentWrapper","Styled.NodeCardTitle","Styled.NodeMenuOptionsWrapper","NodeMenuOptions"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,51 +0,0 @@
|
|
1
|
-
import i, { css as s } from "styled-components";
|
2
|
-
const o = i.div`
|
3
|
-
position: absolute;
|
4
|
-
z-index: 1;
|
5
|
-
overflow: hidden;
|
6
|
-
`, d = i(o)(
|
7
|
-
({ $borderWidth: t }) => `
|
8
|
-
top: 0;
|
9
|
-
left: 0;
|
10
|
-
width: 100%;
|
11
|
-
height: ${t}px;
|
12
|
-
`
|
13
|
-
), c = i(o)(
|
14
|
-
({ $borderWidth: t }) => `
|
15
|
-
bottom: 0;
|
16
|
-
left: 0;
|
17
|
-
width: 100%;
|
18
|
-
height: ${t}px;
|
19
|
-
`
|
20
|
-
), l = i(o)(
|
21
|
-
({ $borderWidth: t }) => `
|
22
|
-
top: 0;
|
23
|
-
right: 0;
|
24
|
-
width: ${t}px;
|
25
|
-
height: 100%;
|
26
|
-
`
|
27
|
-
), $ = i(o)(
|
28
|
-
({ $borderWidth: t }) => `
|
29
|
-
top: 0;
|
30
|
-
left: 0;
|
31
|
-
width: ${t}px;
|
32
|
-
height: 100%;
|
33
|
-
`
|
34
|
-
), g = i.div(
|
35
|
-
({ theme: t, $width: n, $height: e, $borderColor: h, $animationDuration: p, $keyframes: r }) => s`
|
36
|
-
position: relative;
|
37
|
-
width: ${n}px;
|
38
|
-
height: ${e}px;
|
39
|
-
background-color: ${t.colors[h]};
|
40
|
-
opacity: 0;
|
41
|
-
animation: ${r} ${p}s linear infinite;
|
42
|
-
`
|
43
|
-
);
|
44
|
-
export {
|
45
|
-
c as BottomLineContainer,
|
46
|
-
$ as LeftLineContainer,
|
47
|
-
g as Line,
|
48
|
-
l as RightLineContainer,
|
49
|
-
d as TopLineContainer
|
50
|
-
};
|
51
|
-
//# sourceMappingURL=border-path-animation-styled.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"border-path-animation-styled.js","sources":["../../../../src/features/ui/border-path-animation/border-path-animation-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\nimport type { keyframes } from 'styled-components';\n\nimport styled, { css } from 'styled-components';\n\nconst LineContainer = styled.div`\n position: absolute;\n z-index: 1;\n overflow: hidden;\n`;\n\nexport const TopLineContainer = styled(LineContainer)<{\n $borderWidth: number;\n}>(\n ({ $borderWidth }) => `\n top: 0;\n left: 0;\n width: 100%;\n height: ${$borderWidth}px;\n`,\n);\n\nexport const BottomLineContainer = styled(LineContainer)<{\n $borderWidth: number;\n}>(\n ({ $borderWidth }) => `\n bottom: 0;\n left: 0;\n width: 100%;\n height: ${$borderWidth}px;\n`,\n);\n\nexport const RightLineContainer = styled(LineContainer)<{\n $borderWidth: number;\n}>(\n ({ $borderWidth }) => `\n top: 0;\n right: 0;\n width: ${$borderWidth}px;\n height: 100%;\n`,\n);\n\nexport const LeftLineContainer = styled(LineContainer)<{\n $borderWidth: number;\n}>(\n ({ $borderWidth }) => `\n top: 0;\n left: 0;\n width: ${$borderWidth}px;\n height: 100%;\n`,\n);\n\nexport const Line = styled.div<{\n $borderColor: TColorNames;\n $animationDuration: number;\n $keyframes: ReturnType<typeof keyframes>;\n $width: number;\n $height: number;\n}>(\n ({ theme, $width, $height, $borderColor, $animationDuration, $keyframes }) => css`\n position: relative;\n width: ${$width}px;\n height: ${$height}px;\n background-color: ${theme.colors[$borderColor]};\n opacity: 0;\n animation: ${$keyframes} ${$animationDuration}s linear infinite;\n `,\n);\n"],"names":["LineContainer","styled","TopLineContainer","$borderWidth","BottomLineContainer","RightLineContainer","LeftLineContainer","Line","theme","$width","$height","$borderColor","$animationDuration","$keyframes","css"],"mappings":";AAKA,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMhBC,IAAmBD,EAAOD,CAAa;AAAA,EAGlD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA;AAAA,YAIZA,CAAY;AAAA;AAExB,GAEaC,IAAsBH,EAAOD,CAAa;AAAA,EAGrD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA;AAAA,YAIZA,CAAY;AAAA;AAExB,GAEaE,IAAqBJ,EAAOD,CAAa;AAAA,EAGpD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA,WAGbA,CAAY;AAAA;AAAA;AAGvB,GAEaG,IAAoBL,EAAOD,CAAa;AAAA,EAGnD,CAAC,EAAE,cAAAG,EAAA,MAAmB;AAAA;AAAA;AAAA,WAGbA,CAAY;AAAA;AAAA;AAGvB,GAEaI,IAAON,EAAO;AAAA,EAOzB,CAAC,EAAE,OAAAO,GAAO,QAAAC,GAAQ,SAAAC,GAAS,cAAAC,GAAc,oBAAAC,GAAoB,YAAAC,EAAiB,MAAAC;AAAA;AAAA,aAEnEL,CAAM;AAAA,cACLC,CAAO;AAAA,wBACGF,EAAM,OAAOG,CAAY,CAAC;AAAA;AAAA,iBAEjCE,CAAU,IAAID,CAAkB;AAAA;AAEjD;"}
|
@@ -1,108 +0,0 @@
|
|
1
|
-
import { jsxs as p, Fragment as g, jsx as s } from "react/jsx-runtime";
|
2
|
-
import { memo as b, useState as d, useMemo as l, useRef as u, useLayoutEffect as C } from "react";
|
3
|
-
import { keyframes as L } from "styled-components";
|
4
|
-
import { TopLineContainer as k, Line as c, RightLineContainer as W, BottomLineContainer as R, LeftLineContainer as D } from "./border-path-animation-styled.js";
|
5
|
-
const F = (i, r) => {
|
6
|
-
const t = (i + r) * 2, o = i, e = r, y = i / t, n = (i + r) / t, a = (i + r + i) / t;
|
7
|
-
return {
|
8
|
-
top: [
|
9
|
-
[0, { x: 0, y: 0, o: 1 }],
|
10
|
-
[y, { x: o, y: 0, o: 1 }],
|
11
|
-
[y + 1e-3, { x: o, y: 0, o: 0 }],
|
12
|
-
[n - 1e-3, { x: -o, y: 0, o: 0 }],
|
13
|
-
[n, { x: -o, y: 0, o: 1 }],
|
14
|
-
[a, { x: 0, y: 0, o: 1 }],
|
15
|
-
[1, { x: 0, y: 0, o: 1 }]
|
16
|
-
],
|
17
|
-
right: [
|
18
|
-
[0, { x: 0, y: 0, o: 1 }],
|
19
|
-
[y, { x: 0, y: 0, o: 1 }],
|
20
|
-
[n, { x: 0, y: e, o: 1 }],
|
21
|
-
[n + 1e-3, { x: 0, y: e, o: 0 }],
|
22
|
-
[a - 1e-3, { x: 0, y: -e, o: 0 }],
|
23
|
-
[a, { x: 0, y: -e, o: 1 }],
|
24
|
-
[1, { x: 0, y: 0, o: 1 }]
|
25
|
-
],
|
26
|
-
bottom: [
|
27
|
-
[0, { x: o, y: 0, o: 1 }],
|
28
|
-
[y, { x: 0, y: 0, o: 1 }],
|
29
|
-
[n, { x: 0, y: 0, o: 1 }],
|
30
|
-
[a, { x: -o, y: 0, o: 1 }],
|
31
|
-
[a + 1e-3, { x: -o, y: 0, o: 0 }],
|
32
|
-
[a + 2e-3, { x: o, y: 0, o: 0 }],
|
33
|
-
[1, { x: o, y: 0, o: 1 }]
|
34
|
-
],
|
35
|
-
left: [
|
36
|
-
[0, { x: 0, y: e, o: 1 }],
|
37
|
-
[y, { x: 0, y: e, o: 1 }],
|
38
|
-
[n, { x: 0, y: 0, o: 1 }],
|
39
|
-
[a, { x: 0, y: 0, o: 1 }],
|
40
|
-
[1, { x: 0, y: -e, o: 1 }]
|
41
|
-
]
|
42
|
-
};
|
43
|
-
}, $ = (i) => L`
|
44
|
-
${i.map(
|
45
|
-
([r, { x: t, y: o, o: e }]) => `${r * 100}% {
|
46
|
-
transform: translate(${t}px, ${o}px);
|
47
|
-
opacity: ${e};
|
48
|
-
}`
|
49
|
-
).join(" ")}
|
50
|
-
`, K = b((i) => {
|
51
|
-
const { animationDuration: r = 6, borderWidth: t = 1, borderColor: o = "YELLOW_3" } = i, [e, y] = d(1), [n, a] = d(1), m = l(() => F(e, n), [e, n]), x = l(
|
52
|
-
() => ({
|
53
|
-
top: $(m.top),
|
54
|
-
right: $(m.right),
|
55
|
-
bottom: $(m.bottom),
|
56
|
-
left: $(m.left)
|
57
|
-
}),
|
58
|
-
[m]
|
59
|
-
), f = u(null), h = u(null);
|
60
|
-
return C(() => {
|
61
|
-
f.current && y(f.current.getBoundingClientRect().width), h.current && a(h.current.getBoundingClientRect().height);
|
62
|
-
}, []), /* @__PURE__ */ p(g, { children: [
|
63
|
-
/* @__PURE__ */ s(k, { className: "top-line", ref: f, $borderWidth: t, children: /* @__PURE__ */ s(
|
64
|
-
c,
|
65
|
-
{
|
66
|
-
$borderColor: o,
|
67
|
-
$width: e,
|
68
|
-
$height: t,
|
69
|
-
$animationDuration: r,
|
70
|
-
$keyframes: x.top
|
71
|
-
}
|
72
|
-
) }),
|
73
|
-
/* @__PURE__ */ s(W, { ref: h, $borderWidth: t, children: /* @__PURE__ */ s(
|
74
|
-
c,
|
75
|
-
{
|
76
|
-
$width: t,
|
77
|
-
$height: n,
|
78
|
-
$borderColor: o,
|
79
|
-
$animationDuration: r,
|
80
|
-
$keyframes: x.right
|
81
|
-
}
|
82
|
-
) }),
|
83
|
-
/* @__PURE__ */ s(R, { $borderWidth: t, children: /* @__PURE__ */ s(
|
84
|
-
c,
|
85
|
-
{
|
86
|
-
$borderColor: o,
|
87
|
-
$width: e,
|
88
|
-
$height: t,
|
89
|
-
$animationDuration: r,
|
90
|
-
$keyframes: x.bottom
|
91
|
-
}
|
92
|
-
) }),
|
93
|
-
/* @__PURE__ */ s(D, { $borderWidth: t, children: /* @__PURE__ */ s(
|
94
|
-
c,
|
95
|
-
{
|
96
|
-
$width: t,
|
97
|
-
$height: n,
|
98
|
-
$borderColor: o,
|
99
|
-
$animationDuration: r,
|
100
|
-
$keyframes: x.left
|
101
|
-
}
|
102
|
-
) })
|
103
|
-
] });
|
104
|
-
});
|
105
|
-
export {
|
106
|
-
K as default
|
107
|
-
};
|
108
|
-
//# sourceMappingURL=border-path-animation.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"border-path-animation.js","sources":["../../../../src/features/ui/border-path-animation/border-path-animation.tsx"],"sourcesContent":["import type {\n IBorderPathAnimationProps,\n IGetKeyFrames,\n IGetKeyFramesConfig,\n} from './border-path-animation-types';\nimport type { FC } from 'react';\n\nimport { memo, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { keyframes } from 'styled-components';\n\nimport * as Styled from './border-path-animation-styled';\n\nconst getKeyFramesConfig: IGetKeyFramesConfig = (width, height) => {\n const p = (width + height) * 2; // perimeter\n const w = width;\n const h = height;\n const bp1 = width / p;\n const bp2 = (width + height) / p;\n const bp3 = (width + height + width) / p;\n\n return {\n top: [\n [0, { x: 0, y: 0, o: 1 }],\n [bp1, { x: w, y: 0, o: 1 }],\n\n [bp1 + 0.001, { x: w, y: 0, o: 0 }],\n [bp2 - 0.001, { x: -w, y: 0, o: 0 }],\n\n [bp2, { x: -w, y: 0, o: 1 }],\n [bp3, { x: 0, y: 0, o: 1 }],\n [1, { x: 0, y: 0, o: 1 }],\n ],\n right: [\n [0, { x: 0, y: 0, o: 1 }],\n [bp1, { x: 0, y: 0, o: 1 }],\n [bp2, { x: 0, y: h, o: 1 }],\n\n [bp2 + 0.001, { x: 0, y: h, o: 0 }],\n [bp3 - 0.001, { x: 0, y: -h, o: 0 }],\n\n [bp3, { x: 0, y: -h, o: 1 }],\n [1, { x: 0, y: 0, o: 1 }],\n ],\n bottom: [\n [0, { x: w, y: 0, o: 1 }],\n [bp1, { x: 0, y: 0, o: 1 }],\n [bp2, { x: 0, y: 0, o: 1 }],\n [bp3, { x: -w, y: 0, o: 1 }],\n\n [bp3 + 0.001, { x: -w, y: 0, o: 0 }],\n [bp3 + 0.002, { x: w, y: 0, o: 0 }],\n [1, { x: w, y: 0, o: 1 }],\n ],\n left: [\n [0, { x: 0, y: h, o: 1 }],\n [bp1, { x: 0, y: h, o: 1 }],\n [bp2, { x: 0, y: 0, o: 1 }],\n [bp3, { x: 0, y: 0, o: 1 }],\n [1, { x: 0, y: -h, o: 1 }],\n ],\n };\n};\n\nconst getKeyFrames: IGetKeyFrames = config => {\n return keyframes`\n ${config\n .map(\n ([percentage, { x, y, o }]) => `${percentage * 100}% {\n transform: translate(${x}px, ${y}px);\n opacity: ${o};\n }`,\n )\n .join(' ')}\n `;\n};\n\nconst BorderPathAnimation: FC<IBorderPathAnimationProps> = memo(props => {\n const { animationDuration = 6, borderWidth = 1, borderColor = 'YELLOW_3' } = props;\n const [width, setWidth] = useState(1);\n const [height, setHeight] = useState(1);\n const keyFramesConfig = useMemo(() => getKeyFramesConfig(width, height), [width, height]);\n const keyFrames = useMemo(\n () => ({\n top: getKeyFrames(keyFramesConfig.top),\n right: getKeyFrames(keyFramesConfig.right),\n bottom: getKeyFrames(keyFramesConfig.bottom),\n left: getKeyFrames(keyFramesConfig.left),\n }),\n [keyFramesConfig],\n );\n const topRef = useRef<HTMLDivElement>(null);\n const rightRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (topRef.current) {\n setWidth(topRef.current.getBoundingClientRect().width);\n }\n\n if (rightRef.current) {\n setHeight(rightRef.current.getBoundingClientRect().height);\n }\n }, []);\n\n return (\n <>\n <Styled.TopLineContainer className=\"top-line\" ref={topRef} $borderWidth={borderWidth}>\n <Styled.Line\n $borderColor={borderColor}\n $width={width}\n $height={borderWidth}\n $animationDuration={animationDuration}\n $keyframes={keyFrames.top}\n />\n </Styled.TopLineContainer>\n <Styled.RightLineContainer ref={rightRef} $borderWidth={borderWidth}>\n <Styled.Line\n $width={borderWidth}\n $height={height}\n $borderColor={borderColor}\n $animationDuration={animationDuration}\n $keyframes={keyFrames.right}\n />\n </Styled.RightLineContainer>\n <Styled.BottomLineContainer $borderWidth={borderWidth}>\n <Styled.Line\n $borderColor={borderColor}\n $width={width}\n $height={borderWidth}\n $animationDuration={animationDuration}\n $keyframes={keyFrames.bottom}\n />\n </Styled.BottomLineContainer>\n <Styled.LeftLineContainer $borderWidth={borderWidth}>\n <Styled.Line\n $width={borderWidth}\n $height={height}\n $borderColor={borderColor}\n $animationDuration={animationDuration}\n $keyframes={keyFrames.left}\n />\n </Styled.LeftLineContainer>\n </>\n );\n});\n\nexport default BorderPathAnimation;\n"],"names":["getKeyFramesConfig","width","height","p","w","h","bp1","bp2","bp3","getKeyFrames","config","keyframes","percentage","x","y","o","BorderPathAnimation","memo","props","animationDuration","borderWidth","borderColor","setWidth","useState","setHeight","keyFramesConfig","useMemo","keyFrames","topRef","useRef","rightRef","useLayoutEffect","jsxs","Fragment","jsx","Styled.TopLineContainer","Styled.Line","Styled.RightLineContainer","Styled.BottomLineContainer","Styled.LeftLineContainer"],"mappings":";;;;AAYA,MAAMA,IAA0C,CAACC,GAAOC,MAAW;AAC3D,QAAAC,KAAKF,IAAQC,KAAU,GACvBE,IAAIH,GACJI,IAAIH,GACJI,IAAML,IAAQE,GACdI,KAAON,IAAQC,KAAUC,GACzBK,KAAOP,IAAQC,IAASD,KAASE;AAEhC,SAAA;AAAA,IACL,KAAK;AAAA,MACH,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MACxB,CAACG,GAAK,EAAE,GAAGF,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAE1B,CAACE,IAAM,MAAO,EAAE,GAAGF,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAClC,CAACG,IAAM,MAAO,EAAE,GAAG,CAACH,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAEnC,CAACG,GAAK,EAAE,GAAG,CAACH,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC3B,CAACI,GAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC1B,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,IAC1B;AAAA,IACA,OAAO;AAAA,MACL,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MACxB,CAACF,GAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC1B,CAACC,GAAK,EAAE,GAAG,GAAG,GAAGF,GAAG,GAAG,GAAG;AAAA,MAE1B,CAACE,IAAM,MAAO,EAAE,GAAG,GAAG,GAAGF,GAAG,GAAG,GAAG;AAAA,MAClC,CAACG,IAAM,MAAO,EAAE,GAAG,GAAG,GAAG,CAACH,GAAG,GAAG,GAAG;AAAA,MAEnC,CAACG,GAAK,EAAE,GAAG,GAAG,GAAG,CAACH,GAAG,GAAG,GAAG;AAAA,MAC3B,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,IAC1B;AAAA,IACA,QAAQ;AAAA,MACN,CAAC,GAAG,EAAE,GAAGD,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MACxB,CAACE,GAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC1B,CAACC,GAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC1B,CAACC,GAAK,EAAE,GAAG,CAACJ,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAE3B,CAACI,IAAM,MAAO,EAAE,GAAG,CAACJ,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MACnC,CAACI,IAAM,MAAO,EAAE,GAAGJ,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAClC,CAAC,GAAG,EAAE,GAAGA,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,IAC1B;AAAA,IACA,MAAM;AAAA,MACJ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAGC,GAAG,GAAG,GAAG;AAAA,MACxB,CAACC,GAAK,EAAE,GAAG,GAAG,GAAGD,GAAG,GAAG,GAAG;AAAA,MAC1B,CAACE,GAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC1B,CAACC,GAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,MAC1B,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAACH,GAAG,GAAG,GAAG;AAAA,IAC3B;AAAA,EAAA;AAEJ,GAEMI,IAA8B,CAAUC,MACrCC;AAAA,MACHD,EACC;AAAA,EACC,CAAC,CAACE,GAAY,EAAE,GAAAC,GAAG,GAAAC,GAAG,GAAAC,EAAA,CAAG,MAAM,GAAGH,IAAa,GAAG;AAAA,iCACzBC,CAAC,OAAOC,CAAC;AAAA,qBACrBC,CAAC;AAAA;AAAA,EAGf,KAAK,GAAG,CAAC;AAAA,KAIVC,IAAqDC,EAAK,CAASC,MAAA;AACvE,QAAM,EAAE,mBAAAC,IAAoB,GAAG,aAAAC,IAAc,GAAG,aAAAC,IAAc,WAAe,IAAAH,GACvE,CAACjB,GAAOqB,CAAQ,IAAIC,EAAS,CAAC,GAC9B,CAACrB,GAAQsB,CAAS,IAAID,EAAS,CAAC,GAChCE,IAAkBC,EAAQ,MAAM1B,EAAmBC,GAAOC,CAAM,GAAG,CAACD,GAAOC,CAAM,CAAC,GAClFyB,IAAYD;AAAA,IAChB,OAAO;AAAA,MACL,KAAKjB,EAAagB,EAAgB,GAAG;AAAA,MACrC,OAAOhB,EAAagB,EAAgB,KAAK;AAAA,MACzC,QAAQhB,EAAagB,EAAgB,MAAM;AAAA,MAC3C,MAAMhB,EAAagB,EAAgB,IAAI;AAAA,IAAA;AAAA,IAEzC,CAACA,CAAe;AAAA,EAAA,GAEZG,IAASC,EAAuB,IAAI,GACpCC,IAAWD,EAAuB,IAAI;AAE5C,SAAAE,EAAgB,MAAM;AACpB,IAAIH,EAAO,WACTN,EAASM,EAAO,QAAQ,sBAAsB,EAAE,KAAK,GAGnDE,EAAS,WACXN,EAAUM,EAAS,QAAQ,sBAAsB,EAAE,MAAM;AAAA,EAE7D,GAAG,CAAE,CAAA,GAID,gBAAAE,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAwB,WAAU,YAAW,KAAKP,GAAQ,cAAcR,GACvE,UAAA,gBAAAc;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,cAAcf;AAAA,QACd,QAAQpB;AAAA,QACR,SAASmB;AAAA,QACT,oBAAoBD;AAAA,QACpB,YAAYQ,EAAU;AAAA,MAAA;AAAA,IAAA,GAE1B;AAAA,sBACCU,GAAA,EAA0B,KAAKP,GAAU,cAAcV,GACtD,UAAA,gBAAAc;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,QAAQhB;AAAA,QACR,SAASlB;AAAA,QACT,cAAcmB;AAAA,QACd,oBAAoBF;AAAA,QACpB,YAAYQ,EAAU;AAAA,MAAA;AAAA,IAAA,GAE1B;AAAA,IACC,gBAAAO,EAAAI,GAAA,EAA2B,cAAclB,GACxC,UAAA,gBAAAc;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,cAAcf;AAAA,QACd,QAAQpB;AAAA,QACR,SAASmB;AAAA,QACT,oBAAoBD;AAAA,QACpB,YAAYQ,EAAU;AAAA,MAAA;AAAA,IAAA,GAE1B;AAAA,IACC,gBAAAO,EAAAK,GAAA,EAAyB,cAAcnB,GACtC,UAAA,gBAAAc;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,QAAQhB;AAAA,QACR,SAASlB;AAAA,QACT,cAAcmB;AAAA,QACd,oBAAoBF;AAAA,QACpB,YAAYQ,EAAU;AAAA,MAAA;AAAA,IAAA,GAE1B;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
|