@cuemath/leap 3.0.20 → 3.0.21
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/chapter-details/block-sections/block-section-view.js +38 -38
- package/dist/features/chapters-v2/chapter-details/block-sections/block-section-view.js.map +1 -1
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections.js +19 -19
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections.js.map +1 -1
- package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.js +39 -29
- package/dist/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.js.map +1 -1
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js +6 -5
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js.map +1 -1
- package/dist/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.js +25 -25
- package/dist/features/chapters-v2/comps/node-card/teacher-actions/teacher-actions.js.map +1 -1
- package/dist/features/chapters-v2/utils/index.js +2 -1
- package/dist/features/chapters-v2/utils/index.js.map +1 -1
- package/package.json +1 -1
@@ -1,106 +1,106 @@
|
|
1
1
|
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
2
|
-
import
|
3
|
-
import
|
4
|
-
import
|
2
|
+
import L from "../../../../assets/line-icons/icons/more-vertical.js";
|
3
|
+
import S from "../../../../assets/line-icons/icons/skip.js";
|
4
|
+
import T from "../../../ui/context-menu/context-menu.js";
|
5
5
|
import c from "../../../ui/layout/flex-view.js";
|
6
|
-
import
|
7
|
-
import
|
6
|
+
import $ from "../../../ui/text/text.js";
|
7
|
+
import O from "../../comps/node-card/node-card.js";
|
8
8
|
import j from "../../comps/node-card/node-menu-options/node-menu-options.js";
|
9
9
|
import { BLOCK_NAME as k } from "../../constants/block-constants.js";
|
10
10
|
import { getSheetNLessonCount as y } from "../../utils/index.js";
|
11
|
-
import { BlockSectionWrapper as
|
11
|
+
import { BlockSectionWrapper as H, BlockOptionsWrapper as M, BlockSheetContainer as W } from "./block-sections-styled.js";
|
12
12
|
const q = ({
|
13
13
|
userType: o,
|
14
|
-
imageHue:
|
15
|
-
blockData:
|
16
|
-
lessonIdx:
|
17
|
-
isLastBlock:
|
14
|
+
imageHue: u,
|
15
|
+
blockData: m,
|
16
|
+
lessonIdx: l,
|
17
|
+
isLastBlock: g,
|
18
18
|
isGoalBlock: r,
|
19
|
-
onNodeAttempt:
|
19
|
+
onNodeAttempt: C,
|
20
20
|
onNodeAssignAsHomework: x,
|
21
21
|
onNodeMarkAsDone: _,
|
22
|
-
onNodeReattempt:
|
23
|
-
onNodeReview:
|
22
|
+
onNodeReattempt: E,
|
23
|
+
onNodeReview: b,
|
24
24
|
onNodeView: N,
|
25
25
|
onBlockSkipUnskip: i
|
26
26
|
}) => {
|
27
|
-
const { block_type:
|
27
|
+
const { block_type: s, name: p, sheets: a, permissions: w } = m, { can_skip: d, can_un_skip: e } = w, h = k[s], A = y(e, a.length, r, l), I = [
|
28
28
|
{
|
29
29
|
id: "node-card-skip",
|
30
30
|
label: e ? "Revert 'Skip'" : "Skip",
|
31
|
-
icon:
|
31
|
+
icon: S,
|
32
32
|
disabled: !1,
|
33
|
-
onClick: () => i == null ? void 0 : i(
|
33
|
+
onClick: () => i == null ? void 0 : i(m, d)
|
34
34
|
}
|
35
35
|
];
|
36
36
|
return o === "STUDENT" && e ? null : /* @__PURE__ */ t(
|
37
|
-
|
37
|
+
H,
|
38
38
|
{
|
39
|
-
$background: r ?
|
39
|
+
$background: r ? "WHITE_1" : "WHITE_3",
|
40
40
|
$gutterX: 1,
|
41
|
-
$lastBlock:
|
41
|
+
$lastBlock: g,
|
42
42
|
$flexGap: 12,
|
43
43
|
children: /* @__PURE__ */ n(c, { $flexGap: 12, children: [
|
44
44
|
/* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "space-between", children: [
|
45
45
|
/* @__PURE__ */ n(c, { $opacity: e ? 0.5 : 1, children: [
|
46
46
|
/* @__PURE__ */ n(
|
47
|
-
|
47
|
+
$,
|
48
48
|
{
|
49
49
|
$renderAs: "ac4",
|
50
50
|
$color: "BLACK_T_60",
|
51
51
|
$textDecoration: e ? "line-through" : "none",
|
52
52
|
children: [
|
53
|
-
|
53
|
+
h === "Puzzles" ? p : h,
|
54
54
|
" ",
|
55
55
|
A
|
56
56
|
]
|
57
57
|
}
|
58
58
|
),
|
59
|
-
!!r && !!
|
60
|
-
|
59
|
+
!!r && !!l && /* @__PURE__ */ t(
|
60
|
+
$,
|
61
61
|
{
|
62
62
|
$renderAs: "ab2-bold",
|
63
63
|
$color: "BLACK_1",
|
64
64
|
$textDecoration: e ? "line-through" : "none",
|
65
|
-
children:
|
65
|
+
children: p
|
66
66
|
}
|
67
67
|
)
|
68
68
|
] }),
|
69
|
-
o === "TEACHER" && (
|
70
|
-
|
69
|
+
o === "TEACHER" && (d || e) && /* @__PURE__ */ t(
|
70
|
+
T,
|
71
71
|
{
|
72
72
|
targetElement: /* @__PURE__ */ t(
|
73
|
-
|
73
|
+
M,
|
74
74
|
{
|
75
75
|
$width: 20,
|
76
76
|
$height: 20,
|
77
77
|
$justifyContent: "center",
|
78
78
|
$alignItems: "center",
|
79
|
-
children: /* @__PURE__ */ t(
|
79
|
+
children: /* @__PURE__ */ t(L, { width: 18, height: 18 })
|
80
80
|
}
|
81
81
|
),
|
82
|
-
menuElement: /* @__PURE__ */ t(j, { options:
|
82
|
+
menuElement: /* @__PURE__ */ t(j, { options: I }),
|
83
83
|
menuOffset: 5,
|
84
84
|
menuZIndex: 4
|
85
85
|
}
|
86
86
|
)
|
87
87
|
] }),
|
88
|
-
/* @__PURE__ */ t(
|
89
|
-
|
88
|
+
/* @__PURE__ */ t(W, { $opacity: e ? 0.5 : 1, children: a.map((f) => /* @__PURE__ */ t(
|
89
|
+
O,
|
90
90
|
{
|
91
|
-
imageHue:
|
91
|
+
imageHue: u || "BLUE",
|
92
92
|
userType: o,
|
93
|
-
nodeData:
|
94
|
-
blockType:
|
93
|
+
nodeData: f,
|
94
|
+
blockType: s,
|
95
95
|
isSkipped: e,
|
96
|
-
onNodeAttempt:
|
96
|
+
onNodeAttempt: C,
|
97
97
|
onNodeAssignAsHomework: x,
|
98
98
|
onNodeMarkAsDone: _,
|
99
|
-
onNodeReattempt:
|
100
|
-
onNodeReview:
|
99
|
+
onNodeReattempt: E,
|
100
|
+
onNodeReview: b,
|
101
101
|
onNodeView: N
|
102
102
|
},
|
103
|
-
|
103
|
+
f.node_id
|
104
104
|
)) })
|
105
105
|
] })
|
106
106
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"block-section-view.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-section-view.tsx"],"sourcesContent":["import type { INodeMenuOption } from '../../comps/node-card/node-menu-options/node-menu-options-types';\nimport type { IBlockSectionProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport MoreVerticalIcon from '../../../../assets/line-icons/icons/more-vertical';\nimport SkipIcon from '../../../../assets/line-icons/icons/skip';\nimport ContextMenu from '../../../ui/context-menu/context-menu';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport NodeCard from '../../comps/node-card/node-card';\nimport NodeMenuOptions from '../../comps/node-card/node-menu-options/node-menu-options';\nimport { BLOCK_NAME } from '../../constants/block-constants';\nimport { getSheetNLessonCount } from '../../utils';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSectionView: FC<IBlockSectionProps> = ({\n userType,\n imageHue,\n blockData,\n lessonIdx,\n isLastBlock,\n isGoalBlock,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n}) => {\n const { block_type: blockType, name, sheets, permissions } = blockData;\n\n const { can_skip: canSkip, can_un_skip: canUnskip } = permissions;\n const blockName = BLOCK_NAME[blockType];\n\n const sheetNLessonCount = getSheetNLessonCount(canUnskip, sheets.length, isGoalBlock, lessonIdx);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-skip',\n label: canUnskip ? `Revert 'Skip'` : 'Skip',\n icon: SkipIcon,\n disabled: false,\n onClick: () => onBlockSkipUnskip?.(blockData, canSkip),\n },\n ];\n\n if (userType === 'STUDENT' && canUnskip) return null;\n\n return (\n <Styled.BlockSectionWrapper\n $background={isGoalBlock ?
|
1
|
+
{"version":3,"file":"block-section-view.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-section-view.tsx"],"sourcesContent":["import type { INodeMenuOption } from '../../comps/node-card/node-menu-options/node-menu-options-types';\nimport type { IBlockSectionProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport MoreVerticalIcon from '../../../../assets/line-icons/icons/more-vertical';\nimport SkipIcon from '../../../../assets/line-icons/icons/skip';\nimport ContextMenu from '../../../ui/context-menu/context-menu';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport NodeCard from '../../comps/node-card/node-card';\nimport NodeMenuOptions from '../../comps/node-card/node-menu-options/node-menu-options';\nimport { BLOCK_NAME } from '../../constants/block-constants';\nimport { getSheetNLessonCount } from '../../utils';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSectionView: FC<IBlockSectionProps> = ({\n userType,\n imageHue,\n blockData,\n lessonIdx,\n isLastBlock,\n isGoalBlock,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n}) => {\n const { block_type: blockType, name, sheets, permissions } = blockData;\n\n const { can_skip: canSkip, can_un_skip: canUnskip } = permissions;\n const blockName = BLOCK_NAME[blockType];\n\n const sheetNLessonCount = getSheetNLessonCount(canUnskip, sheets.length, isGoalBlock, lessonIdx);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-skip',\n label: canUnskip ? `Revert 'Skip'` : 'Skip',\n icon: SkipIcon,\n disabled: false,\n onClick: () => onBlockSkipUnskip?.(blockData, canSkip),\n },\n ];\n\n if (userType === 'STUDENT' && canUnskip) return null;\n\n return (\n <Styled.BlockSectionWrapper\n $background={isGoalBlock ? `WHITE_1` : 'WHITE_3'}\n $gutterX={1}\n $lastBlock={isLastBlock}\n $flexGap={12}\n >\n <FlexView $flexGap={12}>\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n <FlexView $opacity={canUnskip ? 0.5 : 1}>\n <Text\n $renderAs=\"ac4\"\n $color=\"BLACK_T_60\"\n $textDecoration={canUnskip ? 'line-through' : 'none'}\n >\n {blockName === 'Puzzles' ? name : blockName} {sheetNLessonCount}\n </Text>\n\n {!!isGoalBlock && !!lessonIdx && (\n <Text\n $renderAs=\"ab2-bold\"\n $color=\"BLACK_1\"\n $textDecoration={canUnskip ? 'line-through' : 'none'}\n >\n {name}\n </Text>\n )}\n </FlexView>\n\n {userType === 'TEACHER' && (canSkip || canUnskip) && (\n <ContextMenu\n targetElement={\n <Styled.BlockOptionsWrapper\n $width={20}\n $height={20}\n $justifyContent=\"center\"\n $alignItems=\"center\"\n >\n <MoreVerticalIcon width={18} height={18} />\n </Styled.BlockOptionsWrapper>\n }\n menuElement={<NodeMenuOptions options={menuOptions} />}\n menuOffset={5}\n menuZIndex={4}\n />\n )}\n </FlexView>\n\n <Styled.BlockSheetContainer $opacity={canUnskip ? 0.5 : 1}>\n {sheets.map(nodeData => (\n <NodeCard\n key={nodeData.node_id}\n imageHue={imageHue || 'BLUE'}\n userType={userType}\n nodeData={nodeData}\n blockType={blockType}\n isSkipped={canUnskip}\n onNodeAttempt={onNodeAttempt}\n onNodeAssignAsHomework={onNodeAssignAsHomework}\n onNodeMarkAsDone={onNodeMarkAsDone}\n onNodeReattempt={onNodeReattempt}\n onNodeReview={onNodeReview}\n onNodeView={onNodeView}\n />\n ))}\n </Styled.BlockSheetContainer>\n </FlexView>\n </Styled.BlockSectionWrapper>\n );\n};\n\nexport default BlockSectionView;\n"],"names":["BlockSectionView","userType","imageHue","blockData","lessonIdx","isLastBlock","isGoalBlock","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","blockType","name","sheets","permissions","canSkip","canUnskip","blockName","BLOCK_NAME","sheetNLessonCount","getSheetNLessonCount","menuOptions","SkipIcon","jsx","Styled.BlockSectionWrapper","jsxs","FlexView","Text","ContextMenu","Styled.BlockOptionsWrapper","MoreVerticalIcon","NodeMenuOptions","Styled.BlockSheetContainer","nodeData","NodeCard"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAA2C,CAAC;AAAA,EAChD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AACF,MAAM;AACJ,QAAM,EAAE,YAAYC,GAAW,MAAAC,GAAM,QAAAC,GAAQ,aAAAC,EAAgB,IAAAd,GAEvD,EAAE,UAAUe,GAAS,aAAaC,MAAcF,GAChDG,IAAYC,EAAWP,CAAS,GAEhCQ,IAAoBC,EAAqBJ,GAAWH,EAAO,QAAQV,GAAaF,CAAS,GAEzFoB,IAAiC;AAAA,IACrC;AAAA,MACE,IAAI;AAAA,MACJ,OAAOL,IAAY,kBAAkB;AAAA,MACrC,MAAMM;AAAA,MACN,UAAU;AAAA,MACV,SAAS,MAAMZ,KAAA,gBAAAA,EAAoBV,GAAWe;AAAA,IAChD;AAAA,EAAA;AAGE,SAAAjB,MAAa,aAAakB,IAAkB,OAG9C,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAarB,IAAc,YAAY;AAAA,MACvC,UAAU;AAAA,MACV,YAAYD;AAAA,MACZ,UAAU;AAAA,MAEV,UAAA,gBAAAuB,EAACC,GAAS,EAAA,UAAU,IAClB,UAAA;AAAA,QAAA,gBAAAD,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,iBAClE,UAAA;AAAA,UAAA,gBAAAD,EAACC,GAAS,EAAA,UAAUV,IAAY,MAAM,GACpC,UAAA;AAAA,YAAA,gBAAAS;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,QAAO;AAAA,gBACP,iBAAiBX,IAAY,iBAAiB;AAAA,gBAE7C,UAAA;AAAA,kBAAAC,MAAc,YAAYL,IAAOK;AAAA,kBAAU;AAAA,kBAAEE;AAAA,gBAAA;AAAA,cAAA;AAAA,YAChD;AAAA,YAEC,CAAC,CAAChB,KAAe,CAAC,CAACF,KAClB,gBAAAsB;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,QAAO;AAAA,gBACP,iBAAiBX,IAAY,iBAAiB;AAAA,gBAE7C,UAAAJ;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAECd,MAAa,cAAciB,KAAWC,MACrC,gBAAAO;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,eACE,gBAAAL;AAAA,gBAACM;AAAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,iBAAgB;AAAA,kBAChB,aAAY;AAAA,kBAEZ,UAAC,gBAAAN,EAAAO,GAAA,EAAiB,OAAO,IAAI,QAAQ,IAAI;AAAA,gBAAA;AAAA,cAC3C;AAAA,cAEF,aAAa,gBAAAP,EAACQ,GAAgB,EAAA,SAASV,EAAa,CAAA;AAAA,cACpD,YAAY;AAAA,cACZ,YAAY;AAAA,YAAA;AAAA,UACd;AAAA,QAAA,GAEJ;AAAA,QAEA,gBAAAE,EAACS,GAAA,EAA2B,UAAUhB,IAAY,MAAM,GACrD,UAAOH,EAAA,IAAI,CACVoB,MAAA,gBAAAV;AAAA,UAACW;AAAA,UAAA;AAAA,YAEC,UAAUnC,KAAY;AAAA,YACtB,UAAAD;AAAA,YACA,UAAAmC;AAAA,YACA,WAAAtB;AAAA,YACA,WAAWK;AAAA,YACX,eAAAZ;AAAA,YACA,wBAAAC;AAAA,YACA,kBAAAC;AAAA,YACA,iBAAAC;AAAA,YACA,cAAAC;AAAA,YACA,YAAAC;AAAA,UAAA;AAAA,UAXKwB,EAAS;AAAA,QAajB,CAAA,GACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { memo as
|
1
|
+
import { jsxs as S, jsx as s } from "react/jsx-runtime";
|
2
|
+
import { memo as w, useMemo as x } from "react";
|
3
3
|
import _ from "./block-section-view.js";
|
4
|
-
import { ChapterDetailsWrapper as
|
5
|
-
const
|
4
|
+
import { ChapterDetailsWrapper as E } from "./block-sections-styled.js";
|
5
|
+
const y = w((g) => {
|
6
6
|
const {
|
7
|
-
blocks:
|
8
|
-
imageHue:
|
7
|
+
blocks: n,
|
8
|
+
imageHue: t,
|
9
9
|
userType: l,
|
10
10
|
coreBlocksRef: h,
|
11
11
|
onNodeAttempt: r,
|
@@ -18,30 +18,30 @@ const L = I((g) => {
|
|
18
18
|
} = g;
|
19
19
|
let u = 0;
|
20
20
|
const { goalBlocks: a, nonGoalBlocks: B } = x(
|
21
|
-
() =>
|
21
|
+
() => n.reduce(
|
22
22
|
(o, e) => (e.section_code === "GOALS" || e.section_code === "READINESS" ? o.goalBlocks.push(e) : o.nonGoalBlocks.push(e), o),
|
23
23
|
{ goalBlocks: [], nonGoalBlocks: [] }
|
24
24
|
),
|
25
|
-
[
|
25
|
+
[n]
|
26
26
|
);
|
27
|
-
return /* @__PURE__ */
|
28
|
-
|
27
|
+
return /* @__PURE__ */ S(
|
28
|
+
E,
|
29
29
|
{
|
30
30
|
$width: "100%",
|
31
|
-
$background: B.length ? "
|
31
|
+
$background: B.length ? "WHITE_3" : "WHITE_1",
|
32
32
|
children: [
|
33
|
-
/* @__PURE__ */
|
33
|
+
/* @__PURE__ */ s("div", { ref: h, children: a.map((o, e) => {
|
34
34
|
const { block_type: A, block_id: N, permissions: G } = o;
|
35
35
|
let f = 0;
|
36
|
-
const
|
37
|
-
return A === "GOAL" && (G.can_un_skip || (u += 1), f = u), /* @__PURE__ */
|
36
|
+
const I = e === a.length - 1;
|
37
|
+
return A === "GOAL" && (G.can_un_skip || (u += 1), f = u), /* @__PURE__ */ s(
|
38
38
|
_,
|
39
39
|
{
|
40
40
|
blockData: o,
|
41
41
|
userType: l,
|
42
|
-
isLastBlock:
|
42
|
+
isLastBlock: I,
|
43
43
|
lessonIdx: f,
|
44
|
-
imageHue:
|
44
|
+
imageHue: t,
|
45
45
|
isGoalBlock: !0,
|
46
46
|
onNodeAttempt: r,
|
47
47
|
onNodeAssignAsHomework: i,
|
@@ -56,12 +56,12 @@ const L = I((g) => {
|
|
56
56
|
}) }),
|
57
57
|
B.map((o) => {
|
58
58
|
const { block_id: e } = o;
|
59
|
-
return /* @__PURE__ */
|
59
|
+
return /* @__PURE__ */ s(
|
60
60
|
_,
|
61
61
|
{
|
62
62
|
blockData: o,
|
63
63
|
userType: l,
|
64
|
-
imageHue:
|
64
|
+
imageHue: t,
|
65
65
|
onNodeAttempt: r,
|
66
66
|
onNodeAssignAsHomework: i,
|
67
67
|
onNodeMarkAsDone: c,
|
@@ -78,6 +78,6 @@ const L = I((g) => {
|
|
78
78
|
);
|
79
79
|
});
|
80
80
|
export {
|
81
|
-
|
81
|
+
y as default
|
82
82
|
};
|
83
83
|
//# sourceMappingURL=block-sections.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"block-sections.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-sections.tsx"],"sourcesContent":["import type { IBlockSectionsProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport BlockSectionView from './block-section-view';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSections: FC<IBlockSectionsProps> = memo(props => {\n const {\n blocks,\n imageHue,\n userType,\n coreBlocksRef,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n } = props;\n\n let lessonCount = 0;\n\n const { goalBlocks, nonGoalBlocks } = useMemo(\n () =>\n blocks.reduce(\n (acc, block) => {\n if (block.section_code === 'GOALS' || block.section_code === 'READINESS') {\n acc.goalBlocks.push(block);\n } else {\n acc.nonGoalBlocks.push(block);\n }\n\n return acc;\n },\n { goalBlocks: [] as typeof blocks, nonGoalBlocks: [] as typeof blocks },\n ),\n [blocks],\n );\n\n return (\n <Styled.ChapterDetailsWrapper\n $width=\"100%\"\n $background={!nonGoalBlocks.length ?
|
1
|
+
{"version":3,"file":"block-sections.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-sections.tsx"],"sourcesContent":["import type { IBlockSectionsProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport BlockSectionView from './block-section-view';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSections: FC<IBlockSectionsProps> = memo(props => {\n const {\n blocks,\n imageHue,\n userType,\n coreBlocksRef,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n } = props;\n\n let lessonCount = 0;\n\n const { goalBlocks, nonGoalBlocks } = useMemo(\n () =>\n blocks.reduce(\n (acc, block) => {\n if (block.section_code === 'GOALS' || block.section_code === 'READINESS') {\n acc.goalBlocks.push(block);\n } else {\n acc.nonGoalBlocks.push(block);\n }\n\n return acc;\n },\n { goalBlocks: [] as typeof blocks, nonGoalBlocks: [] as typeof blocks },\n ),\n [blocks],\n );\n\n return (\n <Styled.ChapterDetailsWrapper\n $width=\"100%\"\n $background={!nonGoalBlocks.length ? `WHITE_1` : 'WHITE_3'}\n >\n <div ref={coreBlocksRef}>\n {goalBlocks.map((blockData, idx) => {\n const { block_type: blockType, block_id: blockId, permissions } = blockData;\n let lessonIdx = 0;\n\n const isLastBlock = idx === goalBlocks.length - 1;\n\n if (blockType === 'GOAL') {\n if (!permissions.can_un_skip) {\n lessonCount += 1;\n }\n\n lessonIdx = lessonCount;\n }\n\n return (\n <BlockSectionView\n blockData={blockData}\n userType={userType}\n isLastBlock={isLastBlock}\n key={blockId}\n lessonIdx={lessonIdx}\n imageHue={imageHue}\n isGoalBlock\n onNodeAttempt={onNodeAttempt}\n onNodeAssignAsHomework={onNodeAssignAsHomework}\n onNodeMarkAsDone={onNodeMarkAsDone}\n onNodeReattempt={onNodeReattempt}\n onNodeReview={onNodeReview}\n onNodeView={onNodeView}\n onBlockSkipUnskip={onBlockSkipUnskip}\n />\n );\n })}\n </div>\n\n {nonGoalBlocks.map(blockData => {\n const { block_id: blockId } = blockData;\n\n return (\n <BlockSectionView\n key={blockId}\n blockData={blockData}\n userType={userType}\n imageHue={imageHue}\n onNodeAttempt={onNodeAttempt}\n onNodeAssignAsHomework={onNodeAssignAsHomework}\n onNodeMarkAsDone={onNodeMarkAsDone}\n onNodeReattempt={onNodeReattempt}\n onNodeReview={onNodeReview}\n onNodeView={onNodeView}\n onBlockSkipUnskip={onBlockSkipUnskip}\n />\n );\n })}\n </Styled.ChapterDetailsWrapper>\n );\n});\n\nexport default BlockSections;\n"],"names":["BlockSections","memo","props","blocks","imageHue","userType","coreBlocksRef","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","lessonCount","goalBlocks","nonGoalBlocks","useMemo","acc","block","jsxs","Styled.ChapterDetailsWrapper","jsx","blockData","idx","blockType","blockId","permissions","lessonIdx","isLastBlock","BlockSectionView"],"mappings":";;;;AAQM,MAAAA,IAAyCC,EAAK,CAASC,MAAA;AACrD,QAAA;AAAA,IACJ,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,EACE,IAAAX;AAEJ,MAAIY,IAAc;AAEZ,QAAA,EAAE,YAAAC,GAAY,eAAAC,EAAA,IAAkBC;AAAA,IACpC,MACEd,EAAO;AAAA,MACL,CAACe,GAAKC,OACAA,EAAM,iBAAiB,WAAWA,EAAM,iBAAiB,cACvDD,EAAA,WAAW,KAAKC,CAAK,IAErBD,EAAA,cAAc,KAAKC,CAAK,GAGvBD;AAAA,MAET,EAAE,YAAY,CAAA,GAAqB,eAAe,GAAoB;AAAA,IACxE;AAAA,IACF,CAACf,CAAM;AAAA,EAAA;AAIP,SAAA,gBAAAiB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,aAAcL,EAAc,SAAqB,YAAZ;AAAA,MAErC,UAAA;AAAA,QAAA,gBAAAM,EAAC,SAAI,KAAKhB,GACP,YAAW,IAAI,CAACiB,GAAWC,MAAQ;AAClC,gBAAM,EAAE,YAAYC,GAAW,UAAUC,GAAS,aAAAC,EAAgB,IAAAJ;AAClE,cAAIK,IAAY;AAEV,gBAAAC,IAAcL,MAAQT,EAAW,SAAS;AAEhD,iBAAIU,MAAc,WACXE,EAAY,gBACAb,KAAA,IAGLc,IAAAd,IAIZ,gBAAAQ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,aAAAwB;AAAA,cAEA,WAAAD;AAAA,cACA,UAAAxB;AAAA,cACA,aAAW;AAAA,cACX,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAaV,CAAA,GACH;AAAA,QAECV,EAAc,IAAI,CAAaO,MAAA;AACxB,gBAAA,EAAE,UAAUG,EAAY,IAAAH;AAG5B,iBAAA,gBAAAD;AAAA,YAACQ;AAAA,YAAA;AAAA,cAEC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,UAAAD;AAAA,cACA,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAWP,CAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
@@ -1,60 +1,70 @@
|
|
1
1
|
import { jsx as e, jsxs as t, Fragment as G } from "react/jsx-runtime";
|
2
|
-
import { memo as
|
3
|
-
import { ILLUSTRATIONS as
|
4
|
-
import
|
5
|
-
import { LOTTIE as
|
2
|
+
import { memo as M, useRef as B, useMemo as h } from "react";
|
3
|
+
import { ILLUSTRATIONS as O } from "../../../../assets/illustrations/illustrations.js";
|
4
|
+
import W from "../../../../assets/line-icons/icons/check2.js";
|
5
|
+
import { LOTTIE as b } from "../../../../assets/lottie/lottie.js";
|
6
6
|
import V from "../../../ui/image/image.js";
|
7
7
|
import n from "../../../ui/layout/flex-view.js";
|
8
|
-
import
|
9
|
-
import
|
10
|
-
import
|
11
|
-
import { getChapterCompletionPercentage as
|
12
|
-
import { BannerContainer as
|
13
|
-
const
|
14
|
-
|
15
|
-
|
8
|
+
import v from "../../../ui/lottie-animation/lottie-animation.js";
|
9
|
+
import a from "../../../ui/text/text.js";
|
10
|
+
import H from "../../comps/tag/tag.js";
|
11
|
+
import { getChapterCompletionPercentage as X } from "../../utils/index.js";
|
12
|
+
import { BannerContainer as j, BannerImageWrapper as N, LottieAnimationWrapper as U, ChapterProgressSVG as Y, ChapterProgressSVGCircle as g, StyledImportantIcon as f, BannerImage as F, BannerTitleWrapper as K } from "./chapter-banner-styled.js";
|
13
|
+
const i = 52, s = 54, l = 54, q = {
|
14
|
+
renderer: "svg",
|
15
|
+
autoplay: !0,
|
16
|
+
loop: !1,
|
17
|
+
rendererSettings: {
|
18
|
+
dpr: window.devicePixelRatio || 1,
|
19
|
+
// You might also consider preserveAspectRatio if the Lottie is being scaled
|
20
|
+
preserveAspectRatio: "xMidYMid slice"
|
21
|
+
// Example
|
22
|
+
}
|
23
|
+
}, ce = M((C) => {
|
24
|
+
const $ = B(null), { progressStats: o, imageHue: R, title: S, imageUrl: I, bannerRef: u } = C, r = h(() => X(o), [o]), { iconTopVal: x, iconLeftVal: E } = h(() => {
|
25
|
+
const d = (-(r === 100 ? 60 : r) * 3.6 - 180) * Math.PI / 180, y = l + i * Math.sin(d), D = s + i * Math.cos(d);
|
16
26
|
return {
|
17
27
|
iconLeftVal: y,
|
18
28
|
iconTopVal: D
|
19
29
|
};
|
20
30
|
}, [r]);
|
21
31
|
if (!o) return null;
|
22
|
-
const { mandatory: T, optional: L, classwork:
|
32
|
+
const { mandatory: T, optional: L, classwork: w } = o, { completed: A = 0, total: c = 0 } = T || {}, { completed: P = 0, total: p = 0 } = L || {}, { completed: _ = 0, total: m = 0 } = w || {}, k = m > 0 && _ === m;
|
23
33
|
return /* @__PURE__ */ e(
|
24
|
-
|
34
|
+
j,
|
25
35
|
{
|
26
36
|
$flexDirection: "row",
|
27
37
|
$justifyContent: "center",
|
28
38
|
$alignItems: "center",
|
29
39
|
$widthX: 50,
|
30
|
-
$background: `${
|
31
|
-
ref:
|
40
|
+
$background: `${R}_4`,
|
41
|
+
ref: u,
|
32
42
|
children: /* @__PURE__ */ t(n, { $height: 168, $position: "relative", children: [
|
33
43
|
/* @__PURE__ */ e(
|
34
44
|
V,
|
35
45
|
{
|
36
46
|
width: "100%",
|
37
47
|
height: "168px",
|
38
|
-
src:
|
48
|
+
src: O.CHAPTER_HEADER_BG,
|
39
49
|
alt: "Chapter header background",
|
40
50
|
withLoader: !0
|
41
51
|
}
|
42
52
|
),
|
43
53
|
/* @__PURE__ */ t(N, { children: [
|
44
54
|
r === 100 ? /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(
|
45
|
-
|
55
|
+
v,
|
46
56
|
{
|
47
|
-
src:
|
57
|
+
src: b.CHAPTER_COMPLETED,
|
48
58
|
ref: $,
|
49
59
|
settings: q
|
50
60
|
}
|
51
61
|
) }) : /* @__PURE__ */ t(G, { children: [
|
52
|
-
/* @__PURE__ */ t(
|
62
|
+
/* @__PURE__ */ t(Y, { width: "108px", height: "108px", children: [
|
53
63
|
/* @__PURE__ */ e(
|
54
64
|
g,
|
55
65
|
{
|
56
66
|
$progress: 0,
|
57
|
-
r:
|
67
|
+
r: i,
|
58
68
|
cx: s,
|
59
69
|
cy: l
|
60
70
|
}
|
@@ -65,7 +75,7 @@ const a = 52, s = 54, l = 54, q = { renderer: "canvas", autoplay: !0, loop: !1 }
|
|
65
75
|
$progressCircle: !0,
|
66
76
|
$progressBackground: "BLACK",
|
67
77
|
$progress: 3.3 * r,
|
68
|
-
r:
|
78
|
+
r: i,
|
69
79
|
cx: s,
|
70
80
|
cy: l
|
71
81
|
}
|
@@ -73,26 +83,26 @@ const a = 52, s = 54, l = 54, q = { renderer: "canvas", autoplay: !0, loop: !1 }
|
|
73
83
|
] }),
|
74
84
|
r > 0 && /* @__PURE__ */ e(f, { $progress: !0, $top: x, $left: E })
|
75
85
|
] }),
|
76
|
-
/* @__PURE__ */ e(
|
86
|
+
/* @__PURE__ */ e(F, { src: I, alt: "Chapter image" })
|
77
87
|
] }),
|
78
88
|
/* @__PURE__ */ t(K, { $flexGap: 4, children: [
|
79
|
-
/* @__PURE__ */ e(
|
89
|
+
/* @__PURE__ */ e(a, { $renderAs: "ah4-bold", children: S }),
|
80
90
|
/* @__PURE__ */ t(n, { $flexDirection: "row", $alignItems: "center", $flexGapX: 2.75, children: [
|
81
91
|
!!c && /* @__PURE__ */ t(n, { $position: "relative", $flexDirection: "row", children: [
|
82
92
|
/* @__PURE__ */ e(f, {}),
|
83
93
|
/* @__PURE__ */ t(n, { $flexDirection: "row", $alignItems: "center", $flexGap: 8, children: [
|
84
|
-
/* @__PURE__ */ t(
|
94
|
+
/* @__PURE__ */ t(a, { $renderAs: "ab2", children: [
|
85
95
|
"Core - ",
|
86
|
-
|
96
|
+
A,
|
87
97
|
"/",
|
88
98
|
c
|
89
99
|
] }),
|
90
|
-
k && /* @__PURE__ */ e(
|
100
|
+
k && /* @__PURE__ */ e(H, { Icon: W, label: "CW" })
|
91
101
|
] })
|
92
102
|
] }),
|
93
|
-
p > 0 && /* @__PURE__ */ t(
|
103
|
+
p > 0 && /* @__PURE__ */ t(a, { $renderAs: "ab2", children: [
|
94
104
|
"Supplementary - ",
|
95
|
-
|
105
|
+
P,
|
96
106
|
"/",
|
97
107
|
p
|
98
108
|
] })
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"chapter-banner.js","sources":["../../../../../src/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IChapterBannerProps } from './chapter-banner-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo, useRef } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../ui/text/text';\nimport Tag from '../../comps/tag/tag';\nimport { getChapterCompletionPercentage } from '../../utils';\nimport * as Styled from './chapter-banner-styled';\n\nconst PROGRESS_CIRCLE_RADIUS = 52;\nconst PROGRESS_CIRCLE_CENTER_X = 54;\nconst PROGRESS_CIRCLE_CENTER_Y = 54;\n\nconst sheetCompletedLottieSettings = { renderer: 'canvas', autoplay: true, loop: false };\n\n// This component renders a banner for a chapter, displaying its title, progress, and associated tags.\n// It includes an image, progress visualization, and details about the chapter's core and supplementary sheets.\n// It calculates the completion percentage and dynamically positions an icon based on progress.\nconst ChapterBanner: FC<IChapterBannerProps> = memo(props => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n\n const { progressStats, imageHue, title, imageUrl, bannerRef } = props;\n\n const completionPercentage = useMemo(() => {\n return getChapterCompletionPercentage(progressStats);\n }, [progressStats]);\n\n const { iconTopVal, iconLeftVal } = useMemo(() => {\n //* Calculate the position of the important icon based on the completion percentage\n //* Convert degrees to radians\n const angleInDegree = completionPercentage === 100 ? 60 : completionPercentage;\n\n const angleInRadian = ((-angleInDegree * 3.6 - 180) * Math.PI) / 180;\n const positionX = PROGRESS_CIRCLE_CENTER_Y + PROGRESS_CIRCLE_RADIUS * Math.sin(angleInRadian);\n const positionY = PROGRESS_CIRCLE_CENTER_X + PROGRESS_CIRCLE_RADIUS * Math.cos(angleInRadian);\n\n return {\n iconLeftVal: positionX,\n iconTopVal: positionY,\n };\n }, [completionPercentage]);\n\n if (!progressStats) return null;\n\n const { mandatory, optional, classwork: classWork } = progressStats;\n const { completed: completedMandatorySheets = 0, total: totalMandatorySheets = 0 } =\n mandatory || {};\n const { completed: completedOptionalSheets = 0, total: totalOptionalSheets = 0 } = optional || {};\n const { completed: completedClassWorkSheets = 0, total: totalClassWorkSheets = 0 } =\n classWork || {};\n const showClassWorkTag =\n totalClassWorkSheets > 0 && completedClassWorkSheets === totalClassWorkSheets;\n\n return (\n <Styled.BannerContainer\n $flexDirection=\"row\"\n $justifyContent=\"center\"\n $alignItems=\"center\"\n $widthX={50}\n $background={`${imageHue}_4`}\n ref={bannerRef}\n >\n <FlexView $height={168} $position=\"relative\">\n <Image\n width=\"100%\"\n height=\"168px\"\n src={ILLUSTRATIONS.CHAPTER_HEADER_BG}\n alt=\"Chapter header background\"\n withLoader\n />\n <Styled.BannerImageWrapper>\n {completionPercentage === 100 ? (\n <Styled.LottieAnimationWrapper>\n <LottieAnimation\n src={LOTTIE.CHAPTER_COMPLETED}\n ref={animationRef}\n settings={sheetCompletedLottieSettings}\n />\n </Styled.LottieAnimationWrapper>\n ) : (\n <>\n <Styled.ChapterProgressSVG width=\"108px\" height=\"108px\">\n <Styled.ChapterProgressSVGCircle\n $progress={0}\n r={PROGRESS_CIRCLE_RADIUS}\n cx={PROGRESS_CIRCLE_CENTER_X}\n cy={PROGRESS_CIRCLE_CENTER_Y}\n />\n <Styled.ChapterProgressSVGCircle\n $progressCircle\n $progressBackground={'BLACK'}\n $progress={3.3 * completionPercentage}\n r={PROGRESS_CIRCLE_RADIUS}\n cx={PROGRESS_CIRCLE_CENTER_X}\n cy={PROGRESS_CIRCLE_CENTER_Y}\n />\n </Styled.ChapterProgressSVG>\n\n {completionPercentage > 0 && (\n <Styled.StyledImportantIcon $progress $top={iconTopVal} $left={iconLeftVal} />\n )}\n </>\n )}\n\n <Styled.BannerImage src={imageUrl} alt=\"Chapter image\" />\n </Styled.BannerImageWrapper>\n <Styled.BannerTitleWrapper $flexGap={4}>\n <Text $renderAs=\"ah4-bold\">{title}</Text>\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={2.75}>\n {!!totalMandatorySheets && (\n <FlexView $position=\"relative\" $flexDirection=\"row\">\n <Styled.StyledImportantIcon />\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGap={8}>\n <Text $renderAs=\"ab2\">\n Core - {completedMandatorySheets}/{totalMandatorySheets}\n </Text>\n {showClassWorkTag && <Tag Icon={Check2Icon} label=\"CW\" />}\n </FlexView>\n </FlexView>\n )}\n {totalOptionalSheets > 0 && (\n <Text $renderAs=\"ab2\">\n Supplementary - {completedOptionalSheets}/{totalOptionalSheets}\n </Text>\n )}\n </FlexView>\n </Styled.BannerTitleWrapper>\n </FlexView>\n </Styled.BannerContainer>\n );\n});\n\nexport default ChapterBanner;\n"],"names":["PROGRESS_CIRCLE_RADIUS","PROGRESS_CIRCLE_CENTER_X","PROGRESS_CIRCLE_CENTER_Y","sheetCompletedLottieSettings","ChapterBanner","memo","props","animationRef","useRef","progressStats","imageHue","title","imageUrl","bannerRef","completionPercentage","useMemo","getChapterCompletionPercentage","iconTopVal","iconLeftVal","angleInRadian","positionX","positionY","mandatory","optional","classWork","completedMandatorySheets","totalMandatorySheets","completedOptionalSheets","totalOptionalSheets","completedClassWorkSheets","totalClassWorkSheets","showClassWorkTag","jsx","Styled.BannerContainer","jsxs","FlexView","Image","ILLUSTRATIONS","Styled.BannerImageWrapper","Styled.LottieAnimationWrapper","LottieAnimation","LOTTIE","Fragment","Styled.ChapterProgressSVG","Styled.ChapterProgressSVGCircle","Styled.StyledImportantIcon","Styled.BannerImage","Styled.BannerTitleWrapper","Text","Tag","Check2Icon"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"chapter-banner.js","sources":["../../../../../src/features/chapters-v2/chapter-details/chapter-banner/chapter-banner.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IChapterBannerProps } from './chapter-banner-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo, useRef } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Text from '../../../ui/text/text';\nimport Tag from '../../comps/tag/tag';\nimport { getChapterCompletionPercentage } from '../../utils';\nimport * as Styled from './chapter-banner-styled';\n\nconst PROGRESS_CIRCLE_RADIUS = 52;\nconst PROGRESS_CIRCLE_CENTER_X = 54;\nconst PROGRESS_CIRCLE_CENTER_Y = 54;\n\nconst sheetCompletedLottieSettings = {\n renderer: 'svg',\n autoplay: true,\n loop: false,\n rendererSettings: {\n dpr: window.devicePixelRatio || 1,\n // You might also consider preserveAspectRatio if the Lottie is being scaled\n preserveAspectRatio: 'xMidYMid slice', // Example\n },\n};\n\n// This component renders a banner for a chapter, displaying its title, progress, and associated tags.\n// It includes an image, progress visualization, and details about the chapter's core and supplementary sheets.\n// It calculates the completion percentage and dynamically positions an icon based on progress.\nconst ChapterBanner: FC<IChapterBannerProps> = memo(props => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n\n const { progressStats, imageHue, title, imageUrl, bannerRef } = props;\n\n const completionPercentage = useMemo(() => {\n return getChapterCompletionPercentage(progressStats);\n }, [progressStats]);\n\n const { iconTopVal, iconLeftVal } = useMemo(() => {\n //* Calculate the position of the important icon based on the completion percentage\n //* Convert degrees to radians\n const angleInDegree = completionPercentage === 100 ? 60 : completionPercentage;\n\n const angleInRadian = ((-angleInDegree * 3.6 - 180) * Math.PI) / 180;\n const positionX = PROGRESS_CIRCLE_CENTER_Y + PROGRESS_CIRCLE_RADIUS * Math.sin(angleInRadian);\n const positionY = PROGRESS_CIRCLE_CENTER_X + PROGRESS_CIRCLE_RADIUS * Math.cos(angleInRadian);\n\n return {\n iconLeftVal: positionX,\n iconTopVal: positionY,\n };\n }, [completionPercentage]);\n\n if (!progressStats) return null;\n\n const { mandatory, optional, classwork: classWork } = progressStats;\n const { completed: completedMandatorySheets = 0, total: totalMandatorySheets = 0 } =\n mandatory || {};\n const { completed: completedOptionalSheets = 0, total: totalOptionalSheets = 0 } = optional || {};\n const { completed: completedClassWorkSheets = 0, total: totalClassWorkSheets = 0 } =\n classWork || {};\n const showClassWorkTag =\n totalClassWorkSheets > 0 && completedClassWorkSheets === totalClassWorkSheets;\n\n return (\n <Styled.BannerContainer\n $flexDirection=\"row\"\n $justifyContent=\"center\"\n $alignItems=\"center\"\n $widthX={50}\n $background={`${imageHue}_4`}\n ref={bannerRef}\n >\n <FlexView $height={168} $position=\"relative\">\n <Image\n width=\"100%\"\n height=\"168px\"\n src={ILLUSTRATIONS.CHAPTER_HEADER_BG}\n alt=\"Chapter header background\"\n withLoader\n />\n <Styled.BannerImageWrapper>\n {completionPercentage === 100 ? (\n <Styled.LottieAnimationWrapper>\n <LottieAnimation\n src={LOTTIE.CHAPTER_COMPLETED}\n ref={animationRef}\n settings={sheetCompletedLottieSettings}\n />\n </Styled.LottieAnimationWrapper>\n ) : (\n <>\n <Styled.ChapterProgressSVG width=\"108px\" height=\"108px\">\n <Styled.ChapterProgressSVGCircle\n $progress={0}\n r={PROGRESS_CIRCLE_RADIUS}\n cx={PROGRESS_CIRCLE_CENTER_X}\n cy={PROGRESS_CIRCLE_CENTER_Y}\n />\n <Styled.ChapterProgressSVGCircle\n $progressCircle\n $progressBackground={'BLACK'}\n $progress={3.3 * completionPercentage}\n r={PROGRESS_CIRCLE_RADIUS}\n cx={PROGRESS_CIRCLE_CENTER_X}\n cy={PROGRESS_CIRCLE_CENTER_Y}\n />\n </Styled.ChapterProgressSVG>\n\n {completionPercentage > 0 && (\n <Styled.StyledImportantIcon $progress $top={iconTopVal} $left={iconLeftVal} />\n )}\n </>\n )}\n\n <Styled.BannerImage src={imageUrl} alt=\"Chapter image\" />\n </Styled.BannerImageWrapper>\n <Styled.BannerTitleWrapper $flexGap={4}>\n <Text $renderAs=\"ah4-bold\">{title}</Text>\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={2.75}>\n {!!totalMandatorySheets && (\n <FlexView $position=\"relative\" $flexDirection=\"row\">\n <Styled.StyledImportantIcon />\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGap={8}>\n <Text $renderAs=\"ab2\">\n Core - {completedMandatorySheets}/{totalMandatorySheets}\n </Text>\n {showClassWorkTag && <Tag Icon={Check2Icon} label=\"CW\" />}\n </FlexView>\n </FlexView>\n )}\n {totalOptionalSheets > 0 && (\n <Text $renderAs=\"ab2\">\n Supplementary - {completedOptionalSheets}/{totalOptionalSheets}\n </Text>\n )}\n </FlexView>\n </Styled.BannerTitleWrapper>\n </FlexView>\n </Styled.BannerContainer>\n );\n});\n\nexport default ChapterBanner;\n"],"names":["PROGRESS_CIRCLE_RADIUS","PROGRESS_CIRCLE_CENTER_X","PROGRESS_CIRCLE_CENTER_Y","sheetCompletedLottieSettings","ChapterBanner","memo","props","animationRef","useRef","progressStats","imageHue","title","imageUrl","bannerRef","completionPercentage","useMemo","getChapterCompletionPercentage","iconTopVal","iconLeftVal","angleInRadian","positionX","positionY","mandatory","optional","classWork","completedMandatorySheets","totalMandatorySheets","completedOptionalSheets","totalOptionalSheets","completedClassWorkSheets","totalClassWorkSheets","showClassWorkTag","jsx","Styled.BannerContainer","jsxs","FlexView","Image","ILLUSTRATIONS","Styled.BannerImageWrapper","Styled.LottieAnimationWrapper","LottieAnimation","LOTTIE","Fragment","Styled.ChapterProgressSVG","Styled.ChapterProgressSVGCircle","Styled.StyledImportantIcon","Styled.BannerImage","Styled.BannerTitleWrapper","Text","Tag","Check2Icon"],"mappings":"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"}
|
@@ -4,11 +4,12 @@ import s from "../../../../assets/line-icons/icons/lock2.js";
|
|
4
4
|
import e from "../../../ui/layout/flex-view.js";
|
5
5
|
import d from "../../../ui/text/text.js";
|
6
6
|
const b = t(e)(({ theme: o, $disabled: r }) => {
|
7
|
-
const { BLACK: i, BLACK_T_15: n } = o.colors;
|
7
|
+
const { BLACK: i, BLACK_T_15: n, WHITE_5: p } = o.colors;
|
8
8
|
return `
|
9
9
|
cursor: ${r ? "not-allowed" : "pointer"};
|
10
10
|
position: relative;
|
11
11
|
border-image: linear-gradient(to right, ${n} 0%, ${n} 100%);
|
12
|
+
outline: 1px solid ${p};
|
12
13
|
|
13
14
|
.node-card-border {
|
14
15
|
position: absolute;
|
@@ -58,7 +59,7 @@ t(s)(({}) => `
|
|
58
59
|
width: 28px;
|
59
60
|
height: 28px;
|
60
61
|
`);
|
61
|
-
const
|
62
|
+
const W = t(e)(({
|
62
63
|
theme: o,
|
63
64
|
$paddingRight: r,
|
64
65
|
$paddingLeft: i
|
@@ -77,7 +78,7 @@ const w = t(e)(({
|
|
77
78
|
fill: ${p};
|
78
79
|
}
|
79
80
|
`;
|
80
|
-
}),
|
81
|
+
}), w = t(d)(() => `
|
81
82
|
display: -webkit-box;
|
82
83
|
-webkit-box-orient: vertical;
|
83
84
|
-webkit-line-clamp: 2;
|
@@ -110,11 +111,11 @@ const w = t(e)(({
|
|
110
111
|
`);
|
111
112
|
export {
|
112
113
|
f as IconWrapper,
|
113
|
-
|
114
|
+
W as InProgressIconWrapper,
|
114
115
|
b as NodeCardContainer,
|
115
116
|
$ as NodeCardContentWrapper,
|
116
117
|
m as NodeCardInfoWrapper,
|
117
|
-
|
118
|
+
w as NodeCardTitle,
|
118
119
|
k as NodeKebabMenuWrapper,
|
119
120
|
C as NodeMenuOptionsWrapper,
|
120
121
|
I as SheetTagWrapper,
|
@@ -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 $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 &:hover {\n ${\n !$disabled &&\n `\n outline: 1px solid ${BLACK};\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,
|
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, WHITE_5 } = 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 outline: 1px solid ${WHITE_5};\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 &:hover {\n ${\n !$disabled &&\n `\n outline: 1px solid ${BLACK};\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","WHITE_5","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,GAAY,SAAAC,EAAA,IAAYJ,EAAM;AAEtC,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELE,CAAU,QAAQA,CAAU;AAAA,yBACjDC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAexB,CAACH,KACD;AAAA,+BACuBC,CAAK;AAAA,SAE9B;AAAA;AAAA;AAGN,CAAC,GAEKG,IAAsBP,EAAOQ,CAAa,EAAE,CAAC,EAAE,OAAAN,QAAY;AACzD,QAAA,EAAE,QAAAO,EAAW,IAAAP;AAEZ,SAAA;AAAA,aACIO,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBV,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAU,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcZ,EAAOC,CAAQ;AAAA;AAAA,GAI7BY,IAAyBb,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKa,IAAkBd,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAc,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBhB,EAAOiB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBlB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAiB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYpB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWkB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBvB,EAAOwB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuBzB,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKwB,IAAyB1B,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,GAAO,UAAAyB,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKXzB,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}
|
@@ -1,51 +1,51 @@
|
|
1
1
|
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
2
|
-
import { memo as Q, useRef as
|
2
|
+
import { memo as Q, useRef as k, useCallback as o } from "react";
|
3
3
|
import Z from "../../../../../assets/line-icons/icons/check2.js";
|
4
4
|
import v from "../../../../../assets/line-icons/icons/eye2.js";
|
5
5
|
import R from "../../../../../assets/line-icons/icons/home2.js";
|
6
|
-
import
|
6
|
+
import O from "../../../../../assets/line-icons/icons/more-vertical.js";
|
7
7
|
import w from "../../../../../assets/line-icons/icons/redo.js";
|
8
8
|
import V from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
|
9
9
|
import D from "../../../../ui/hooks/use-context-menu-click-handler.js";
|
10
|
-
import
|
10
|
+
import y from "../../../../ui/layout/flex-view.js";
|
11
11
|
import N from "../../../../ui/lottie-animation/lottie-animation.js";
|
12
12
|
import rr from "../../../../ui/text/text.js";
|
13
13
|
import { BLOCK_TYPE as tr } from "../../../constants/block-constants.js";
|
14
14
|
import { NODE_CARD_STATES as er, TEACHER_MENU_LABELS as nr } from "../../../constants/node-constants.js";
|
15
15
|
import { getNodeTypeBasedBgImage as cr } from "../../../utils/index.js";
|
16
16
|
import { getNodeCardBasedIcon as ir } from "../../../utils/node-card-utils.js";
|
17
|
-
import { NodeCardContainer as ar, NodeCardInfoWrapper as lr, IconWrapper as sr, StyledImportantIcon as or, NodeKebabMenuWrapper as
|
17
|
+
import { NodeCardContainer as ar, NodeCardInfoWrapper as lr, IconWrapper as sr, StyledImportantIcon as or, NodeKebabMenuWrapper as L, NodeCardContentWrapper as mr, NodeCardTitle as pr, NodeMenuOptionsWrapper as dr } from "../node-card-styled.js";
|
18
18
|
import hr from "../node-card-tags.js";
|
19
19
|
import fr from "../node-menu-options/node-menu-options.js";
|
20
20
|
const ur = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: Cr, REVIEW: $r, VIEW: _r, MARK_AS_DONE: br, RESET: Ir } = nr, Pr = Q(
|
21
21
|
({
|
22
22
|
nodeData: t,
|
23
|
-
imageHue:
|
24
|
-
blockType:
|
25
|
-
isSkipped:
|
23
|
+
imageHue: S,
|
24
|
+
blockType: T,
|
25
|
+
isSkipped: x,
|
26
26
|
onNodeAssignAsHomework: m,
|
27
27
|
onNodeMarkAsDone: p,
|
28
28
|
onNodeView: n,
|
29
29
|
onNodeReview: c,
|
30
30
|
onNodeReattempt: d
|
31
31
|
}) => {
|
32
|
-
const f =
|
32
|
+
const f = k(null), { menuVisible: $, onMenuClick: _ } = D(f), {
|
33
33
|
accuracy: W,
|
34
34
|
attempt_location: B,
|
35
35
|
node_type: u,
|
36
36
|
card_header: M,
|
37
37
|
title: K,
|
38
|
-
state:
|
38
|
+
state: b,
|
39
39
|
is_optional: A,
|
40
|
-
sheet_statement:
|
40
|
+
sheet_statement: I,
|
41
41
|
permissions: G,
|
42
42
|
user_attempt_id: l
|
43
|
-
} = t, { lottie: j } = ir(u), C =
|
43
|
+
} = t, { lottie: j } = ir(u), C = k(null), {
|
44
44
|
can_mark_familiar: X,
|
45
45
|
can_review: s,
|
46
46
|
can_assign_as_homework: H,
|
47
47
|
can_reset: F
|
48
|
-
} = G,
|
48
|
+
} = G, g = T === tr.GOAL, i = b === er.LOCKED, P = B === "INCLASS", z = cr(u), h = o(
|
49
49
|
(e) => {
|
50
50
|
switch (e) {
|
51
51
|
case "node-card-view":
|
@@ -82,11 +82,11 @@ const ur = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: Cr, REVIEW: $r,
|
|
82
82
|
(e = C.current) == null || e.stop();
|
83
83
|
}, []), q = o(() => {
|
84
84
|
s && l ? c == null || c(t) : n == null || n(t);
|
85
|
-
}, [s, t, c, n, l]),
|
85
|
+
}, [s, t, c, n, l]), E = o(
|
86
86
|
(e) => {
|
87
|
-
e.stopPropagation(),
|
87
|
+
e.stopPropagation(), _();
|
88
88
|
},
|
89
|
-
[
|
89
|
+
[_]
|
90
90
|
), J = [
|
91
91
|
{
|
92
92
|
id: "node-card-view",
|
@@ -117,21 +117,21 @@ const ur = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: Cr, REVIEW: $r,
|
|
117
117
|
onClick: h
|
118
118
|
}
|
119
119
|
];
|
120
|
-
return /* @__PURE__ */ a(
|
120
|
+
return /* @__PURE__ */ a(y, { $position: "relative", children: [
|
121
121
|
/* @__PURE__ */ r(
|
122
122
|
ar,
|
123
123
|
{
|
124
|
-
$background: `${
|
125
|
-
$disabled: !!(
|
124
|
+
$background: `${S}_2`,
|
125
|
+
$disabled: !!(x || i),
|
126
126
|
onClick: q,
|
127
127
|
children: /* @__PURE__ */ a(
|
128
128
|
V,
|
129
129
|
{
|
130
130
|
renderAs: "primary",
|
131
|
-
tooltipItem:
|
131
|
+
tooltipItem: I,
|
132
132
|
position: "bottom",
|
133
133
|
zIndex: 5,
|
134
|
-
hidden: !
|
134
|
+
hidden: $ || !I,
|
135
135
|
parentWidth: "100%",
|
136
136
|
widthX: 11.25,
|
137
137
|
children: [
|
@@ -176,12 +176,12 @@ const ur = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: Cr, REVIEW: $r,
|
|
176
176
|
" ",
|
177
177
|
P && "• CW"
|
178
178
|
] }),
|
179
|
-
/* @__PURE__ */ r(
|
179
|
+
/* @__PURE__ */ r(y, { className: "context-menu", children: g && /* @__PURE__ */ r(L, { ref: f, onClick: E, children: /* @__PURE__ */ r(O, { width: 18, height: 18 }) }) })
|
180
180
|
]
|
181
181
|
}
|
182
182
|
),
|
183
|
-
/* @__PURE__ */ r(hr, { nodeType: u, state:
|
184
|
-
!
|
183
|
+
/* @__PURE__ */ r(hr, { nodeType: u, state: b, accuracy: W }),
|
184
|
+
!g && /* @__PURE__ */ a(
|
185
185
|
mr,
|
186
186
|
{
|
187
187
|
$flexDirection: "row",
|
@@ -200,7 +200,7 @@ const ur = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: Cr, REVIEW: $r,
|
|
200
200
|
children: K
|
201
201
|
}
|
202
202
|
),
|
203
|
-
/* @__PURE__ */ r(
|
203
|
+
/* @__PURE__ */ r(L, { ref: f, onClick: E, children: /* @__PURE__ */ r(O, { width: 18, height: 18 }) })
|
204
204
|
]
|
205
205
|
}
|
206
206
|
)
|
@@ -209,7 +209,7 @@ const ur = { renderer: "canvas", autoplay: !1 }, { ASSIGN_AS_HW: Cr, REVIEW: $r,
|
|
209
209
|
)
|
210
210
|
}
|
211
211
|
),
|
212
|
-
/* @__PURE__ */ r(dr, { $visible:
|
212
|
+
/* @__PURE__ */ r(dr, { $visible: $, children: /* @__PURE__ */ r(fr, { options: J }) })
|
213
213
|
] });
|
214
214
|
}
|
215
215
|
);
|
@@ -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 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 handleOnNodeCardClick = useCallback(() => {\n if (canReview && userAttemptId) {\n onNodeReview?.(nodeData);\n } else {\n onNodeView?.(nodeData);\n }\n }, [canReview, nodeData, onNodeReview, onNodeView, userAttemptId]);\n\n const handleOnKebabMenuClick = useCallback(\n (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n e.stopPropagation();\n onMenuClick();\n },\n [onMenuClick],\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 <FlexView $position=\"relative\">\n <Styled.NodeCardContainer\n $background={`${imageHue}_2`}\n $disabled={Boolean(isSkipped || 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 $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\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\" $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={handleOnKebabMenuClick}>\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={handleOnKebabMenuClick}>\n <MoreVerticalIcon width={16} height={16} />\n </Styled.NodeKebabMenuWrapper>\n </Styled.NodeCardContentWrapper>\n )}\n </ArrowTooltip>\n </Styled.NodeCardContainer>\n <Styled.NodeMenuOptionsWrapper $visible={menuVisible}>\n <NodeMenuOptions options={menuOptions} />\n </Styled.NodeMenuOptionsWrapper>\n </FlexView>\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","handleOnNodeCardClick","handleOnKebabMenuClick","menuOptions","Eye2Icon","Home2Icon","RedoIcon","Check2Icon","jsxs","FlexView","jsx","Styled.NodeCardContainer","ArrowTooltip","Styled.NodeCardInfoWrapper","Styled.IconWrapper","LottieAnimation","Styled.StyledImportantIcon","Text","Styled.NodeKebabMenuWrapper","MoreVerticalIcon","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 handleOnNodeCardClick = useCallback(() => {\n if (canReview && userAttemptId) {\n onNodeReview?.(nodeData);\n } else {\n onNodeView?.(nodeData);\n }\n }, [canReview, nodeData, onNodeReview, onNodeView, userAttemptId]);\n\n const handleOnKebabMenuClick = useCallback(\n (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n e.stopPropagation();\n onMenuClick();\n },\n [onMenuClick],\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 <FlexView $position=\"relative\">\n <Styled.NodeCardContainer\n $background={`${imageHue}_2`}\n $disabled={Boolean(isSkipped || sheetLocked)}\n onClick={handleOnNodeCardClick}\n >\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={sheetStatement}\n position=\"bottom\"\n zIndex={5}\n hidden={menuVisible || !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\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\" $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={handleOnKebabMenuClick}>\n <MoreVerticalIcon width={18} height={18} />\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={handleOnKebabMenuClick}>\n <MoreVerticalIcon width={18} height={18} />\n </Styled.NodeKebabMenuWrapper>\n </Styled.NodeCardContentWrapper>\n )}\n </ArrowTooltip>\n </Styled.NodeCardContainer>\n <Styled.NodeMenuOptionsWrapper $visible={menuVisible}>\n <NodeMenuOptions options={menuOptions} />\n </Styled.NodeMenuOptionsWrapper>\n </FlexView>\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","handleOnNodeCardClick","handleOnKebabMenuClick","menuOptions","Eye2Icon","Home2Icon","RedoIcon","Check2Icon","jsxs","FlexView","jsx","Styled.NodeCardContainer","ArrowTooltip","Styled.NodeCardInfoWrapper","Styled.IconWrapper","LottieAnimation","Styled.StyledImportantIcon","Text","Styled.NodeKebabMenuWrapper","MoreVerticalIcon","NodeCardTags","Styled.NodeCardContentWrapper","Styled.NodeCardTitle","Styled.NodeMenuOptionsWrapper","NodeMenuOptions"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/features/chapters-v2/utils/index.ts"],"sourcesContent":["import type { IChapterProgressStats } from '../chapter-details/chapter-details-types';\nimport type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\n\n// This function calculates the completion percentage of a chapter based on progress stats.\n// If no progress stats are provided, it returns 0.\n// It uses the `mandatory` field from the progress stats to determine the completed and total items.\n// It returns an integer representing the percentage of completion, rounded down to the nearest whole number.\nconst getChapterCompletionPercentage = (progressStats: IChapterProgressStats | null) => {\n if (!progressStats) return 0;\n\n const { mandatory } = progressStats;\n const { completed, total } = mandatory;\n\n if (total === 0) {\n return 0;\n }\n\n const percentage = Math.floor((completed / total) * 100);\n\n return percentage;\n};\n\nconst getNodeTypeBasedBgImage = (nodeType: INodeDataProps['node_type']) => {\n switch (nodeType) {\n case 'LEARNING':\n case 'LEVEL2':\n case 'LEVEL3':\n return ILLUSTRATIONS.NODE_LEARN_BG;\n case 'RECAP':\n case 'REMEDIAL':\n case 'REVISION':\n return ILLUSTRATIONS.NODE_RECAP_BG;\n\n case 'DYNAMIC':\n case 'ASSESSMENT':\n case 'CHAPTER_ASSESSMENT':\n case 'DIAGNOSTIC':\n return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n\n case 'PRACTICE':\n case 'EXTRA_PRACTICE':\n case 'TARGET_PRACTICE':\n case 'MASTERY':\n return ILLUSTRATIONS.NODE_PRACTICE_BG;\n\n case 'PUZZLE':\n case 'PUZZLE_EASY':\n case 'PUZZLE_MEDIUM':\n case 'PUZZLE_HARD':\n return ILLUSTRATIONS.NODE_PUZZLE_BG;\n\n case 'VIDEO':\n return ILLUSTRATIONS.NODE_VIDEO_BG;\n\n default:\n return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n }\n};\n\nconst getSheetNLessonCount = (\n isSkipped: boolean,\n sheetsLength: number,\n isGoalBlock?: boolean,\n lessonIdx?: number,\n) => {\n if (
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/features/chapters-v2/utils/index.ts"],"sourcesContent":["import type { IChapterProgressStats } from '../chapter-details/chapter-details-types';\nimport type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\n\n// This function calculates the completion percentage of a chapter based on progress stats.\n// If no progress stats are provided, it returns 0.\n// It uses the `mandatory` field from the progress stats to determine the completed and total items.\n// It returns an integer representing the percentage of completion, rounded down to the nearest whole number.\nconst getChapterCompletionPercentage = (progressStats: IChapterProgressStats | null) => {\n if (!progressStats) return 0;\n\n const { mandatory } = progressStats;\n const { completed, total } = mandatory;\n\n if (total === 0) {\n return 0;\n }\n\n const percentage = Math.floor((completed / total) * 100);\n\n return percentage;\n};\n\nconst getNodeTypeBasedBgImage = (nodeType: INodeDataProps['node_type']) => {\n switch (nodeType) {\n case 'LEARNING':\n case 'LEVEL2':\n case 'LEVEL3':\n return ILLUSTRATIONS.NODE_LEARN_BG;\n case 'RECAP':\n case 'REMEDIAL':\n case 'REVISION':\n return ILLUSTRATIONS.NODE_RECAP_BG;\n\n case 'DYNAMIC':\n case 'ASSESSMENT':\n case 'CHAPTER_ASSESSMENT':\n case 'DIAGNOSTIC':\n return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n\n case 'PRACTICE':\n case 'EXTRA_PRACTICE':\n case 'TARGET_PRACTICE':\n case 'MASTERY':\n return ILLUSTRATIONS.NODE_PRACTICE_BG;\n\n case 'PUZZLE':\n case 'PUZZLE_EASY':\n case 'PUZZLE_MEDIUM':\n case 'PUZZLE_HARD':\n return ILLUSTRATIONS.NODE_PUZZLE_BG;\n\n case 'VIDEO':\n return ILLUSTRATIONS.NODE_VIDEO_BG;\n\n default:\n return ILLUSTRATIONS.NODE_CUSTOM_TEST_BG;\n }\n};\n\nconst getSheetNLessonCount = (\n isSkipped: boolean,\n sheetsLength: number,\n isGoalBlock?: boolean,\n lessonIdx?: number,\n) => {\n if (!isGoalBlock) return `(${sheetsLength})`;\n\n if (isSkipped || !lessonIdx) return undefined;\n\n return `${lessonIdx}`;\n};\n\nexport { getChapterCompletionPercentage, getNodeTypeBasedBgImage, getSheetNLessonCount };\n"],"names":["getChapterCompletionPercentage","progressStats","mandatory","completed","total","getNodeTypeBasedBgImage","nodeType","ILLUSTRATIONS","getSheetNLessonCount","isSkipped","sheetsLength","isGoalBlock","lessonIdx"],"mappings":";AASM,MAAAA,IAAiC,CAACC,MAAgD;AAClF,MAAA,CAACA,EAAsB,QAAA;AAErB,QAAA,EAAE,WAAAC,EAAc,IAAAD,GAChB,EAAE,WAAAE,GAAW,OAAAC,EAAU,IAAAF;AAE7B,SAAIE,MAAU,IACL,IAGU,KAAK,MAAOD,IAAYC,IAAS,GAAG;AAGzD,GAEMC,IAA0B,CAACC,MAA0C;AACzE,UAAQA,GAAU;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOC,EAAc;AAAA,IACvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB,KAAK;AACH,aAAOA,EAAc;AAAA,IAEvB;AACE,aAAOA,EAAc;AAAA,EACzB;AACF,GAEMC,IAAuB,CAC3BC,GACAC,GACAC,GACAC,MACG;AACH,MAAI,CAACD,EAAoB,QAAA,IAAID,CAAY;AAErC,MAAA,EAAAD,KAAa,CAACG;AAElB,WAAO,GAAGA,CAAS;AACrB;"}
|