@cuemath/leap 2.9.6-as6 → 2.9.6-as7
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 +17 -13
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js.map +1 -1
- package/dist/features/chapters-v2/utils/node-card-utils.js +34 -33
- package/dist/features/chapters-v2/utils/node-card-utils.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,9 +7,9 @@ const m = t(e)(({
|
|
|
7
7
|
$showOutline: o,
|
|
8
8
|
theme: r,
|
|
9
9
|
$disabled: n,
|
|
10
|
-
$isSheetLocked:
|
|
10
|
+
$isSheetLocked: a
|
|
11
11
|
}) => {
|
|
12
|
-
const { BLACK_1:
|
|
12
|
+
const { BLACK_1: s, BLACK: p, BLACK_T_15: i } = r.colors;
|
|
13
13
|
return `
|
|
14
14
|
cursor: ${n ? "not-allowed" : "pointer"};
|
|
15
15
|
position: relative;
|
|
@@ -35,7 +35,7 @@ const m = t(e)(({
|
|
|
35
35
|
|
|
36
36
|
.node-card-border > .border-path-animation {
|
|
37
37
|
fill: none;
|
|
38
|
-
stroke: ${
|
|
38
|
+
stroke: ${p};
|
|
39
39
|
stroke-width: 1.5;
|
|
40
40
|
//* view box size 170 + 56 + 170 + 56 = 452
|
|
41
41
|
//* 452 / 2 = 226
|
|
@@ -54,13 +54,13 @@ const m = t(e)(({
|
|
|
54
54
|
&:hover {
|
|
55
55
|
${!n && `
|
|
56
56
|
.node-card-border > .border-path-animation {
|
|
57
|
-
stroke: ${
|
|
57
|
+
stroke: ${s};
|
|
58
58
|
stroke-dasharray: 452;
|
|
59
59
|
animation: none;
|
|
60
60
|
}
|
|
61
61
|
`}
|
|
62
62
|
|
|
63
|
-
${o && !
|
|
63
|
+
${o && !a && `outline: 1px solid ${p};`};
|
|
64
64
|
}
|
|
65
65
|
`;
|
|
66
66
|
}), g = t(d)(({ theme: o }) => {
|
|
@@ -72,14 +72,14 @@ const m = t(e)(({
|
|
|
72
72
|
top: -2.5px;
|
|
73
73
|
right: -2.5px;
|
|
74
74
|
`;
|
|
75
|
-
}),
|
|
75
|
+
}), $ = t(e)(({ $bgImage: o }) => `
|
|
76
76
|
background-image: url(${o});
|
|
77
77
|
|
|
78
78
|
& .context-menu {
|
|
79
79
|
justify-self: flex-end;
|
|
80
80
|
margin-left: auto;
|
|
81
81
|
}
|
|
82
|
-
`),
|
|
82
|
+
`), k = t(e)`
|
|
83
83
|
border-radius: 50%;
|
|
84
84
|
`, w = t(e)(() => `
|
|
85
85
|
position: relative;
|
|
@@ -94,18 +94,22 @@ t(l)(({}) => `
|
|
|
94
94
|
width: 28px;
|
|
95
95
|
height: 28px;
|
|
96
96
|
`);
|
|
97
|
-
const v = t(e)(({
|
|
98
|
-
|
|
97
|
+
const v = t(e)(({
|
|
98
|
+
theme: o,
|
|
99
|
+
$paddingRight: r
|
|
100
|
+
}) => {
|
|
101
|
+
const { BLACK_1: n, WHITE_1: a } = o.colors;
|
|
99
102
|
return `
|
|
100
103
|
position: absolute;
|
|
101
104
|
top: -10px;
|
|
102
105
|
right: -10px;
|
|
103
106
|
padding: 0px;
|
|
104
107
|
padding-left: 6px;
|
|
105
|
-
|
|
108
|
+
padding-right: ${r}px;
|
|
109
|
+
background: ${n};
|
|
106
110
|
|
|
107
111
|
path {
|
|
108
|
-
fill: ${
|
|
112
|
+
fill: ${a};
|
|
109
113
|
}
|
|
110
114
|
`;
|
|
111
115
|
}), y = t(c)(() => `
|
|
@@ -140,11 +144,11 @@ const v = t(e)(({ theme: o }) => {
|
|
|
140
144
|
}
|
|
141
145
|
`);
|
|
142
146
|
export {
|
|
143
|
-
|
|
147
|
+
k as IconWrapper,
|
|
144
148
|
v as InProgressIconWrapper,
|
|
145
149
|
m as NodeCardContainer,
|
|
146
150
|
w as NodeCardContentWrapper,
|
|
147
|
-
|
|
151
|
+
$ as NodeCardInfoWrapper,
|
|
148
152
|
y as NodeCardTitle,
|
|
149
153
|
C as NodeKebabMenuWrapper,
|
|
150
154
|
W as NodeMenuOptionsWrapper,
|
|
@@ -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 $showOutline?: boolean;\n $disabled: boolean;\n $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({\n $showOutline,\n theme,\n $disabled,\n $isSheetLocked,\n}) => {\n const { BLACK_1, 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 ${$showOutline && `outline: 1px solid ${BLACK_T_15};`};\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 .node-card-border > .border-path-animation {\n stroke: ${BLACK_1};\n stroke-dasharray: 452;\n animation: none;\n }\n `\n }\n\n ${$showOutline && !$isSheetLocked && `outline: 1px solid ${BLACK};`};\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)(({
|
|
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 $showOutline?: boolean;\n $disabled: boolean;\n $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({\n $showOutline,\n theme,\n $disabled,\n $isSheetLocked,\n}) => {\n const { BLACK_1, 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 ${$showOutline && `outline: 1px solid ${BLACK_T_15};`};\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 .node-card-border > .border-path-animation {\n stroke: ${BLACK_1};\n stroke-dasharray: 452;\n animation: none;\n }\n `\n }\n\n ${$showOutline && !$isSheetLocked && `outline: 1px solid ${BLACK};`};\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 }>(({\n theme,\n $paddingRight,\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: 6px;\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","$showOutline","theme","$disabled","$isSheetLocked","BLACK_1","BLACK","BLACK_T_15","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAaA,MAAMA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC;AAAA,EAC9D,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,OAAAC,GAAO,YAAAC,EAAA,IAAeL,EAAM;AAEtC,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELI,CAAU,QAAQA,CAAU;AAAA,MACpEN,KAAgB,sBAAsBM,CAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAezCA,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,CAACH,KACD;AAAA;AAAA,sBAEcE,CAAO;AAAA;AAAA;AAAA;AAAA,SAKvB;AAAA;AAAA,QAEEJ,KAAgB,CAACG,KAAkB,sBAAsBE,CAAK,GAAG;AAAA;AAAA;AAGzE,CAAC,GAEKE,IAAsBT,EAAOU,CAAa,EAAE,CAAC,EAAE,OAAAP,QAAY;AACzD,QAAA,EAAE,QAAAQ,EAAW,IAAAR;AAEZ,SAAA;AAAA,aACIQ,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBZ,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAY,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcd,EAAOC,CAAQ;AAAA;AAAA,GAI7Bc,IAAyBf,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKe,IAAkBhB,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAgB,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBlB,EAAOmB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBpB,EAAOC,CAAQ,EAA6B,CAAC;AAAA,EACzE,OAAAE;AAAA,EACA,eAAAkB;AACF,MAAM;AACJ,QAAM,EAAE,SAAAf,GAAS,SAAAgB,MAAYnB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMYkB,CAAa;AAAA,kBAChBf,CAAO;AAAA;AAAA;AAAA,cAGXgB,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,OAAAE,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKuB,IAAyB1B,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAE,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;"}
|
|
@@ -3,26 +3,26 @@ import p from "../../../assets/line-icons/icons/alarm.js";
|
|
|
3
3
|
import f from "../../../assets/line-icons/icons/bulb2.js";
|
|
4
4
|
import T from "../../../assets/line-icons/icons/check2.js";
|
|
5
5
|
import u from "../../../assets/line-icons/icons/dart.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import R from "../../../assets/line-icons/icons/exclamation.js";
|
|
7
|
+
import A from "../../../assets/line-icons/icons/lock2.js";
|
|
8
8
|
import h from "../../../assets/line-icons/icons/play2.js";
|
|
9
9
|
import D from "../../../assets/line-icons/icons/puzzle.js";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { LOTTIE as
|
|
14
|
-
import
|
|
10
|
+
import $ from "../../../assets/line-icons/icons/recap.js";
|
|
11
|
+
import C from "../../../assets/line-icons/icons/status.js";
|
|
12
|
+
import g from "../../../assets/line-icons/icons/testtube.js";
|
|
13
|
+
import { LOTTIE as r } from "../../../assets/lottie/lottie.js";
|
|
14
|
+
import S from "../../ui/layout/flex-view.js";
|
|
15
15
|
import a from "../../ui/arrow-tooltip/arrow-tooltip.js";
|
|
16
|
-
import
|
|
16
|
+
import d from "../../ui/text/text.js";
|
|
17
17
|
import { InProgressIconWrapper as l } from "../comps/node-card/node-card-styled.js";
|
|
18
18
|
import E from "../comps/tag/tag.js";
|
|
19
|
-
const
|
|
19
|
+
const P = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
20
20
|
if (!o)
|
|
21
21
|
return { isOverdue: !1, daysText: "", differenceInDays: 0 };
|
|
22
|
-
const i = Math.floor(Date.now() / 1e3), c = o - i,
|
|
23
|
-
return { isOverdue: s, daysText:
|
|
24
|
-
},
|
|
25
|
-
const { isOverdue: s, daysText:
|
|
22
|
+
const i = Math.floor(Date.now() / 1e3), c = o - i, t = Math.ceil(c / P), s = t < 0, n = t > 0 ? `${Math.abs(t)}D` : "";
|
|
23
|
+
return { isOverdue: s, daysText: n, differenceInDays: t };
|
|
24
|
+
}, B = (o, i, c, t) => {
|
|
25
|
+
const { isOverdue: s, daysText: n, differenceInDays: m } = O(t);
|
|
26
26
|
if (s && b.includes(o))
|
|
27
27
|
return {
|
|
28
28
|
icon: /* @__PURE__ */ e(
|
|
@@ -34,7 +34,7 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
34
34
|
zIndex: 10,
|
|
35
35
|
hidden: !i,
|
|
36
36
|
parentWidth: "fit-content",
|
|
37
|
-
children: /* @__PURE__ */ e(
|
|
37
|
+
children: /* @__PURE__ */ e(S, { $background: "RED", $borderRadius: 16, $gapX: 0.24, $gutterX: 0.5, children: /* @__PURE__ */ e(d, { $renderAs: "ac4-black", $color: "WHITE", children: "OVERDUE" }) })
|
|
38
38
|
}
|
|
39
39
|
),
|
|
40
40
|
top: -10,
|
|
@@ -48,7 +48,7 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
48
48
|
{
|
|
49
49
|
renderAs: "primary",
|
|
50
50
|
position: "bottom",
|
|
51
|
-
tooltipItem:
|
|
51
|
+
tooltipItem: m > 1 ? `${m} days left` : "Complete it today",
|
|
52
52
|
zIndex: 10,
|
|
53
53
|
hidden: !i,
|
|
54
54
|
children: /* @__PURE__ */ e(
|
|
@@ -58,7 +58,8 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
58
58
|
$alignItems: "center",
|
|
59
59
|
$justifyContent: "center",
|
|
60
60
|
$borderRadius: 16,
|
|
61
|
-
|
|
61
|
+
$paddingRight: 6,
|
|
62
|
+
children: n && /* @__PURE__ */ e(d, { $renderAs: "ub3-bold", $color: "WHITE", children: n })
|
|
62
63
|
}
|
|
63
64
|
)
|
|
64
65
|
}
|
|
@@ -68,7 +69,7 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
68
69
|
};
|
|
69
70
|
case "LOCKED":
|
|
70
71
|
return {
|
|
71
|
-
icon: /* @__PURE__ */ e(
|
|
72
|
+
icon: /* @__PURE__ */ e(A, { width: 32, height: 32 }),
|
|
72
73
|
top: -12,
|
|
73
74
|
right: -12
|
|
74
75
|
};
|
|
@@ -80,11 +81,11 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
80
81
|
$flexDirection: "row",
|
|
81
82
|
$alignItems: "center",
|
|
82
83
|
$justifyContent: "center",
|
|
83
|
-
$gutterX: r ? 0.25 : 0,
|
|
84
84
|
$borderRadius: 16,
|
|
85
|
+
$paddingRight: 0,
|
|
85
86
|
children: [
|
|
86
|
-
|
|
87
|
-
/* @__PURE__ */ e(
|
|
87
|
+
n && /* @__PURE__ */ e(d, { $renderAs: "ub3-bold", $color: "WHITE", children: n }),
|
|
88
|
+
/* @__PURE__ */ e(C, {})
|
|
88
89
|
]
|
|
89
90
|
}
|
|
90
91
|
)
|
|
@@ -110,7 +111,7 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
110
111
|
position: "bottom",
|
|
111
112
|
tooltipItem: i ? "Waiting for teacher to review" : "Needs your review",
|
|
112
113
|
zIndex: 10,
|
|
113
|
-
children: /* @__PURE__ */ e(E, { Icon:
|
|
114
|
+
children: /* @__PURE__ */ e(E, { Icon: R })
|
|
114
115
|
}
|
|
115
116
|
),
|
|
116
117
|
top: -10,
|
|
@@ -121,23 +122,23 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
121
122
|
icon: void 0
|
|
122
123
|
};
|
|
123
124
|
}
|
|
124
|
-
},
|
|
125
|
+
}, X = (o) => {
|
|
125
126
|
switch (o) {
|
|
126
127
|
case "LEARNING":
|
|
127
128
|
return {
|
|
128
|
-
lottie:
|
|
129
|
+
lottie: r.LEARN,
|
|
129
130
|
icon: f
|
|
130
131
|
};
|
|
131
132
|
case "RECAP":
|
|
132
133
|
return {
|
|
133
|
-
lottie:
|
|
134
|
-
icon:
|
|
134
|
+
lottie: r.RECAP,
|
|
135
|
+
icon: $
|
|
135
136
|
};
|
|
136
137
|
case "DYNAMIC":
|
|
137
138
|
case "ASSESSMENT":
|
|
138
139
|
case "CHAPTER_ASSESSMENT":
|
|
139
140
|
return {
|
|
140
|
-
lottie:
|
|
141
|
+
lottie: r.TEST,
|
|
141
142
|
icon: p
|
|
142
143
|
};
|
|
143
144
|
case "PRACTICE":
|
|
@@ -145,30 +146,30 @@ const g = 60 * 60 * 24, b = ["NOT_STARTED", "IN_PROGRESS"], O = (o) => {
|
|
|
145
146
|
case "TARGET_PRACTICE":
|
|
146
147
|
case "MASTERY":
|
|
147
148
|
return {
|
|
148
|
-
lottie:
|
|
149
|
+
lottie: r.PRACTICE,
|
|
149
150
|
icon: u
|
|
150
151
|
};
|
|
151
152
|
case "PUZZLE_EASY":
|
|
152
153
|
case "PUZZLE_MEDIUM":
|
|
153
154
|
case "PUZZLE_HARD":
|
|
154
155
|
return {
|
|
155
|
-
lottie:
|
|
156
|
+
lottie: r.PUZZLE,
|
|
156
157
|
icon: D
|
|
157
158
|
};
|
|
158
159
|
case "VIDEO":
|
|
159
160
|
return {
|
|
160
|
-
lottie:
|
|
161
|
+
lottie: r.VIDEO,
|
|
161
162
|
icon: h
|
|
162
163
|
};
|
|
163
164
|
default:
|
|
164
165
|
return {
|
|
165
|
-
lottie:
|
|
166
|
-
icon:
|
|
166
|
+
lottie: r.PROJECT,
|
|
167
|
+
icon: g
|
|
167
168
|
};
|
|
168
169
|
}
|
|
169
170
|
};
|
|
170
171
|
export {
|
|
171
|
-
|
|
172
|
-
|
|
172
|
+
X as getNodeCardBasedIcon,
|
|
173
|
+
B as getNodeStateBasedTagInfo
|
|
173
174
|
};
|
|
174
175
|
//# sourceMappingURL=node-card-utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node-card-utils.js","sources":["../../../../src/features/chapters-v2/utils/node-card-utils.tsx"],"sourcesContent":["import type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport AlarmIcon from '../../../assets/line-icons/icons/alarm';\nimport Bulb2Icon from '../../../assets/line-icons/icons/bulb2';\nimport Check2Icon from '../../../assets/line-icons/icons/check2';\nimport DartIcon from '../../../assets/line-icons/icons/dart';\nimport ExclamationIcon from '../../../assets/line-icons/icons/exclamation';\nimport Lock2Icon from '../../../assets/line-icons/icons/lock2';\nimport Play2Icon from '../../../assets/line-icons/icons/play2';\nimport PuzzleIcon from '../../../assets/line-icons/icons/puzzle';\nimport RecapIcon from '../../../assets/line-icons/icons/recap';\nimport StatusIcon from '../../../assets/line-icons/icons/status';\nimport TestTubeIcon from '../../../assets/line-icons/icons/testtube';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport FlexView from '../..//ui/layout/flex-view';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Text from '../../ui/text/text';\nimport { InProgressIconWrapper } from '../comps/node-card/node-card-styled';\nimport Tag from '../comps/tag/tag';\n\ninterface DueDateInfo {\n isOverdue: boolean;\n daysText: string;\n differenceInDays: number;\n}\n\nconst SECONDS_PER_DAY = 60 * 60 * 24;\nconst OVERDUE_TAG_STATES: INodeDataProps['state'][] = ['NOT_STARTED', 'IN_PROGRESS'];\n\nconst calculateDueDateInfo = (dueDateTs?: number | null): DueDateInfo => {\n if (!dueDateTs) {\n return { isOverdue: false, daysText: '', differenceInDays: 0 };\n }\n\n const currentTimestamp = Math.floor(Date.now() / 1000);\n const differenceInSeconds = dueDateTs - currentTimestamp;\n const differenceInDays = Math.ceil(differenceInSeconds / SECONDS_PER_DAY);\n\n const isOverdue = differenceInDays < 0;\n\n const daysText = differenceInDays > 0 ? `${Math.abs(differenceInDays)}D` : '';\n\n return { isOverdue, daysText, differenceInDays };\n};\n\nconst getNodeStateBasedTagInfo = (\n nodeState: INodeDataProps['state'],\n isStudent: boolean,\n accuracy?: number | null,\n dueDateTs?: number | null,\n) => {\n const { isOverdue, daysText, differenceInDays } = calculateDueDateInfo(dueDateTs);\n\n if (isOverdue && OVERDUE_TAG_STATES.includes(nodeState)) {\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem=\"Complete now\"\n zIndex={10}\n hidden={!isStudent}\n parentWidth=\"fit-content\"\n >\n <FlexView $background=\"RED\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n OVERDUE\n </Text>\n </FlexView>\n </ArrowTooltip>\n ),\n top: -10,\n right: -10,\n };\n }\n\n switch (nodeState) {\n case 'NOT_STARTED':\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={\n differenceInDays > 1 ? `${differenceInDays} days left` : 'Complete it today'\n }\n zIndex={10}\n hidden={!isStudent}\n >\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n >\n {daysText && (\n <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n {daysText}\n </Text>\n )}\n </InProgressIconWrapper>\n </ArrowTooltip>\n ),\n top: 0,\n right: 0,\n };\n case 'LOCKED':\n return {\n icon: <Lock2Icon width={32} height={32} />,\n top: -12,\n right: -12,\n };\n case 'IN_PROGRESS':\n return {\n icon: (\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $
|
|
1
|
+
{"version":3,"file":"node-card-utils.js","sources":["../../../../src/features/chapters-v2/utils/node-card-utils.tsx"],"sourcesContent":["import type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport AlarmIcon from '../../../assets/line-icons/icons/alarm';\nimport Bulb2Icon from '../../../assets/line-icons/icons/bulb2';\nimport Check2Icon from '../../../assets/line-icons/icons/check2';\nimport DartIcon from '../../../assets/line-icons/icons/dart';\nimport ExclamationIcon from '../../../assets/line-icons/icons/exclamation';\nimport Lock2Icon from '../../../assets/line-icons/icons/lock2';\nimport Play2Icon from '../../../assets/line-icons/icons/play2';\nimport PuzzleIcon from '../../../assets/line-icons/icons/puzzle';\nimport RecapIcon from '../../../assets/line-icons/icons/recap';\nimport StatusIcon from '../../../assets/line-icons/icons/status';\nimport TestTubeIcon from '../../../assets/line-icons/icons/testtube';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport FlexView from '../..//ui/layout/flex-view';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Text from '../../ui/text/text';\nimport { InProgressIconWrapper } from '../comps/node-card/node-card-styled';\nimport Tag from '../comps/tag/tag';\n\ninterface DueDateInfo {\n isOverdue: boolean;\n daysText: string;\n differenceInDays: number;\n}\n\nconst SECONDS_PER_DAY = 60 * 60 * 24;\nconst OVERDUE_TAG_STATES: INodeDataProps['state'][] = ['NOT_STARTED', 'IN_PROGRESS'];\n\nconst calculateDueDateInfo = (dueDateTs?: number | null): DueDateInfo => {\n if (!dueDateTs) {\n return { isOverdue: false, daysText: '', differenceInDays: 0 };\n }\n\n const currentTimestamp = Math.floor(Date.now() / 1000);\n const differenceInSeconds = dueDateTs - currentTimestamp;\n const differenceInDays = Math.ceil(differenceInSeconds / SECONDS_PER_DAY);\n\n const isOverdue = differenceInDays < 0;\n\n const daysText = differenceInDays > 0 ? `${Math.abs(differenceInDays)}D` : '';\n\n return { isOverdue, daysText, differenceInDays };\n};\n\nconst getNodeStateBasedTagInfo = (\n nodeState: INodeDataProps['state'],\n isStudent: boolean,\n accuracy?: number | null,\n dueDateTs?: number | null,\n) => {\n const { isOverdue, daysText, differenceInDays } = calculateDueDateInfo(dueDateTs);\n\n if (isOverdue && OVERDUE_TAG_STATES.includes(nodeState)) {\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem=\"Complete now\"\n zIndex={10}\n hidden={!isStudent}\n parentWidth=\"fit-content\"\n >\n <FlexView $background=\"RED\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n OVERDUE\n </Text>\n </FlexView>\n </ArrowTooltip>\n ),\n top: -10,\n right: -10,\n };\n }\n\n switch (nodeState) {\n case 'NOT_STARTED':\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={\n differenceInDays > 1 ? `${differenceInDays} days left` : 'Complete it today'\n }\n zIndex={10}\n hidden={!isStudent}\n >\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n $paddingRight={6}\n >\n {daysText && (\n <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n {daysText}\n </Text>\n )}\n </InProgressIconWrapper>\n </ArrowTooltip>\n ),\n top: 0,\n right: 0,\n };\n case 'LOCKED':\n return {\n icon: <Lock2Icon width={32} height={32} />,\n top: -12,\n right: -12,\n };\n case 'IN_PROGRESS':\n return {\n icon: (\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n $paddingRight={0}\n >\n {daysText && (\n <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n {daysText}\n </Text>\n )}\n <StatusIcon />\n </InProgressIconWrapper>\n ),\n };\n case 'COMPLETED':\n return {\n icon: (\n <Tag\n Icon={Check2Icon}\n label={typeof accuracy === 'number' ? `${accuracy}%` : undefined}\n />\n ),\n top: -10,\n right: -10,\n };\n case 'WAIT_FOR_REVIEW':\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={isStudent ? 'Waiting for teacher to review' : 'Needs your review'}\n zIndex={10}\n >\n <Tag Icon={ExclamationIcon} />\n </ArrowTooltip>\n ),\n top: -10,\n right: -10,\n };\n\n default:\n return {\n icon: undefined,\n };\n }\n};\n\nconst getNodeCardBasedIcon = (nodeType: INodeDataProps['node_type']) => {\n switch (nodeType) {\n case 'LEARNING':\n return {\n lottie: LOTTIE.LEARN,\n icon: Bulb2Icon,\n };\n case 'RECAP':\n return {\n lottie: LOTTIE.RECAP,\n icon: RecapIcon,\n };\n case 'DYNAMIC':\n case 'ASSESSMENT':\n case 'CHAPTER_ASSESSMENT':\n return {\n lottie: LOTTIE.TEST,\n icon: AlarmIcon,\n };\n case 'PRACTICE':\n case 'EXTRA_PRACTICE':\n case 'TARGET_PRACTICE':\n case 'MASTERY':\n return {\n lottie: LOTTIE.PRACTICE,\n icon: DartIcon,\n };\n case 'PUZZLE_EASY':\n case 'PUZZLE_MEDIUM':\n case 'PUZZLE_HARD':\n return {\n lottie: LOTTIE.PUZZLE,\n icon: PuzzleIcon,\n };\n case 'VIDEO':\n return {\n lottie: LOTTIE.VIDEO,\n icon: Play2Icon,\n };\n default:\n return {\n lottie: LOTTIE.PROJECT,\n icon: TestTubeIcon,\n };\n }\n};\n\nexport { getNodeStateBasedTagInfo, getNodeCardBasedIcon };\n"],"names":["SECONDS_PER_DAY","OVERDUE_TAG_STATES","calculateDueDateInfo","dueDateTs","currentTimestamp","differenceInSeconds","differenceInDays","isOverdue","daysText","getNodeStateBasedTagInfo","nodeState","isStudent","accuracy","jsx","ArrowTooltip","FlexView","Text","InProgressIconWrapper","Lock2Icon","jsxs","StatusIcon","Tag","Check2Icon","ExclamationIcon","getNodeCardBasedIcon","nodeType","LOTTIE","Bulb2Icon","RecapIcon","AlarmIcon","DartIcon","PuzzleIcon","Play2Icon","TestTubeIcon"],"mappings":"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"}
|