@cuemath/leap 3.5.4-mb-2 → 3.5.4-mb-3
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/assets/line-icons/icons/sticker.js +24 -20
- package/dist/assets/line-icons/icons/sticker.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-sidebar/question-guide.js +30 -33
- package/dist/features/worksheet/worksheet/worksheet-sidebar/question-guide.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,46 +1,50 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
const
|
|
1
|
+
import { jsxs as t, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
const c = (i) => /* @__PURE__ */ t(
|
|
3
3
|
"svg",
|
|
4
4
|
{
|
|
5
5
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6
|
-
width: "
|
|
7
|
-
height: "
|
|
8
|
-
viewBox: "0 0
|
|
6
|
+
width: "32",
|
|
7
|
+
height: "32",
|
|
8
|
+
viewBox: "0 0 32 32",
|
|
9
9
|
fill: "none",
|
|
10
|
-
...
|
|
10
|
+
...i,
|
|
11
11
|
children: [
|
|
12
|
-
/* @__PURE__ */
|
|
12
|
+
/* @__PURE__ */ l(
|
|
13
13
|
"path",
|
|
14
14
|
{
|
|
15
|
-
d: "
|
|
16
|
-
fill: "
|
|
15
|
+
d: "M25.4662 5.86719V19.207L25.2097 19.4453L19.6381 24.5872L19.4076 24.7995H6.53394V5.86719H25.4662ZM8.13289 23.2005H18.2957V18.0573H23.8673V7.46615H8.13289V23.2005ZM19.8959 22.1719L22.6199 19.6576H19.8959V22.1719Z",
|
|
16
|
+
fill: "black",
|
|
17
|
+
fillOpacity: "0.6"
|
|
17
18
|
}
|
|
18
19
|
),
|
|
19
|
-
/* @__PURE__ */
|
|
20
|
+
/* @__PURE__ */ l(
|
|
20
21
|
"path",
|
|
21
22
|
{
|
|
22
|
-
d: "
|
|
23
|
-
fill: "
|
|
23
|
+
d: "M14.1334 12.416C14.1334 13.0787 13.5962 13.616 12.9334 13.616C12.2707 13.616 11.7334 13.0787 11.7334 12.416C11.7334 11.7532 12.2707 11.216 12.9334 11.216C13.5962 11.216 14.1334 11.7532 14.1334 12.416Z",
|
|
24
|
+
fill: "black",
|
|
25
|
+
fillOpacity: "0.6"
|
|
24
26
|
}
|
|
25
27
|
),
|
|
26
|
-
/* @__PURE__ */
|
|
28
|
+
/* @__PURE__ */ l(
|
|
27
29
|
"path",
|
|
28
30
|
{
|
|
29
|
-
d: "
|
|
30
|
-
fill: "
|
|
31
|
+
d: "M20.2667 12.4133C20.2667 13.0761 19.7295 13.6133 19.0667 13.6133C18.404 13.6133 17.8667 13.0761 17.8667 12.4133C17.8667 11.7506 18.404 11.2133 19.0667 11.2133C19.7295 11.2133 20.2667 11.7506 20.2667 12.4133Z",
|
|
32
|
+
fill: "black",
|
|
33
|
+
fillOpacity: "0.6"
|
|
31
34
|
}
|
|
32
35
|
),
|
|
33
|
-
/* @__PURE__ */
|
|
36
|
+
/* @__PURE__ */ l(
|
|
34
37
|
"path",
|
|
35
38
|
{
|
|
36
|
-
d: "
|
|
37
|
-
fill: "
|
|
39
|
+
d: "M12.5658 17.1146C12.7671 17.289 12.9777 17.45 13.196 17.5964C14.1542 18.2388 15.2683 18.6027 16.4551 18.6029C17.3525 18.6029 18.2074 18.3947 18.9838 18.0169L19.683 19.4557C18.6971 19.9354 17.6041 20.2031 16.4551 20.2031C14.9318 20.203 13.5109 19.7327 12.3054 18.9245C12.0316 18.7409 11.7691 18.5397 11.5189 18.3229L12.5658 17.1146Z",
|
|
40
|
+
fill: "black",
|
|
41
|
+
fillOpacity: "0.6"
|
|
38
42
|
}
|
|
39
43
|
)
|
|
40
44
|
]
|
|
41
45
|
}
|
|
42
|
-
),
|
|
46
|
+
), C = c;
|
|
43
47
|
export {
|
|
44
|
-
|
|
48
|
+
C as default
|
|
45
49
|
};
|
|
46
50
|
//# sourceMappingURL=sticker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticker.js","sources":["../../../../src/assets/line-icons/icons/sticker.tsx"],"sourcesContent":["import { type FC, type SVGProps } from 'react';\n\nconst StickerIcon: FC<SVGProps<SVGSVGElement>> = props => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"
|
|
1
|
+
{"version":3,"file":"sticker.js","sources":["../../../../src/assets/line-icons/icons/sticker.tsx"],"sourcesContent":["import { type FC, type SVGProps } from 'react';\n\nconst StickerIcon: FC<SVGProps<SVGSVGElement>> = props => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n {...props}\n >\n <path\n d=\"M25.4662 5.86719V19.207L25.2097 19.4453L19.6381 24.5872L19.4076 24.7995H6.53394V5.86719H25.4662ZM8.13289 23.2005H18.2957V18.0573H23.8673V7.46615H8.13289V23.2005ZM19.8959 22.1719L22.6199 19.6576H19.8959V22.1719Z\"\n fill=\"black\"\n fillOpacity=\"0.6\"\n />\n <path\n d=\"M14.1334 12.416C14.1334 13.0787 13.5962 13.616 12.9334 13.616C12.2707 13.616 11.7334 13.0787 11.7334 12.416C11.7334 11.7532 12.2707 11.216 12.9334 11.216C13.5962 11.216 14.1334 11.7532 14.1334 12.416Z\"\n fill=\"black\"\n fillOpacity=\"0.6\"\n />\n <path\n d=\"M20.2667 12.4133C20.2667 13.0761 19.7295 13.6133 19.0667 13.6133C18.404 13.6133 17.8667 13.0761 17.8667 12.4133C17.8667 11.7506 18.404 11.2133 19.0667 11.2133C19.7295 11.2133 20.2667 11.7506 20.2667 12.4133Z\"\n fill=\"black\"\n fillOpacity=\"0.6\"\n />\n <path\n d=\"M12.5658 17.1146C12.7671 17.289 12.9777 17.45 13.196 17.5964C14.1542 18.2388 15.2683 18.6027 16.4551 18.6029C17.3525 18.6029 18.2074 18.3947 18.9838 18.0169L19.683 19.4557C18.6971 19.9354 17.6041 20.2031 16.4551 20.2031C14.9318 20.203 13.5109 19.7327 12.3054 18.9245C12.0316 18.7409 11.7691 18.5397 11.5189 18.3229L12.5658 17.1146Z\"\n fill=\"black\"\n fillOpacity=\"0.6\"\n />\n </svg>\n);\n\nexport default StickerIcon;\n"],"names":["StickerIcon","props","jsxs","jsx","StickerIcon$1"],"mappings":";AAEA,MAAMA,IAA2C,CAC/CC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,aAAY;AAAA,QAAA;AAAA,MACd;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,aAAY;AAAA,QAAA;AAAA,MACd;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,aAAY;AAAA,QAAA;AAAA,MACd;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,aAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as y, useState as g, useCallback as h, useMemo as G, useRef as
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as a, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { memo as y, useState as g, useCallback as h, useMemo as G, useRef as N, useEffect as L } from "react";
|
|
3
|
+
import O from "../../../ui/arrow-tooltip/arrow-tooltip.js";
|
|
4
4
|
import p from "../../../ui/buttons/clickable/clickable.js";
|
|
5
|
-
import
|
|
5
|
+
import n from "../../../ui/layout/flex-view.js";
|
|
6
6
|
import P from "../../../ui/separator/separator.js";
|
|
7
7
|
import m from "../../../ui/text/text.js";
|
|
8
8
|
import k from "../../constants/events.js";
|
|
9
|
-
import { GuideContainer as V, HintIcon as j, SolIcon as x, Pointer as B, SectionContainer as M, Section as
|
|
9
|
+
import { GuideContainer as V, HintIcon as j, SolIcon as x, Pointer as B, SectionContainer as M, Section as q, CloseIcon as K, Guide as U } from "./worksheet-sidebar-styled.js";
|
|
10
10
|
const ot = y(
|
|
11
11
|
({
|
|
12
12
|
questionWidth: f,
|
|
@@ -14,23 +14,23 @@ const ot = y(
|
|
|
14
14
|
activeQuestionIndex: A,
|
|
15
15
|
learnosity: I,
|
|
16
16
|
actionbarHeight: S,
|
|
17
|
-
loggerRef:
|
|
17
|
+
loggerRef: r,
|
|
18
18
|
plugins: u
|
|
19
19
|
}) => {
|
|
20
20
|
var H;
|
|
21
|
-
const [e,
|
|
21
|
+
const [e, l] = g(), [X, v] = g({
|
|
22
22
|
top: 0,
|
|
23
23
|
left: 0
|
|
24
24
|
}), { top: T, left: b } = X, w = h(() => {
|
|
25
|
-
|
|
26
|
-
}, [
|
|
27
|
-
|
|
28
|
-
}, [
|
|
29
|
-
|
|
25
|
+
l("HINT"), r.current(k.WORKSHEET_V3_HINT_SEEN);
|
|
26
|
+
}, [r]), R = h(() => {
|
|
27
|
+
l("SOL"), r.current(k.WORKSHEET_V3_SOLUTION_SEEN);
|
|
28
|
+
}, [r]), W = h(() => {
|
|
29
|
+
l(() => {
|
|
30
30
|
});
|
|
31
|
-
}, []), { hints:
|
|
32
|
-
if (
|
|
33
|
-
const i =
|
|
31
|
+
}, []), { hints: c, solution: d } = ((H = _[A]) == null ? void 0 : H.metadata) || {}, o = G(() => e === void 0 ? void 0 : e === "HINT" ? c : d, [e, c, d]), E = N(null), C = N(null), $ = h((s) => {
|
|
32
|
+
if (s.current) {
|
|
33
|
+
const i = s.current.getBoundingClientRect();
|
|
34
34
|
v({
|
|
35
35
|
top: i.top + i.height / 2 - 8,
|
|
36
36
|
left: i.right - 78
|
|
@@ -39,32 +39,29 @@ const ot = y(
|
|
|
39
39
|
}
|
|
40
40
|
}, []);
|
|
41
41
|
return e && o && I && I.renderMath("mathjax"), L(() => {
|
|
42
|
-
e === "HINT" ? $(
|
|
43
|
-
}, [e, $, o]), /* @__PURE__ */
|
|
42
|
+
e === "HINT" ? $(C) : e === "SOL" ? $(E) : o || l(void 0);
|
|
43
|
+
}, [e, $, o]), /* @__PURE__ */ a(V, { $background: "WHITE", children: [
|
|
44
44
|
(u == null ? void 0 : u.stickers) ?? null,
|
|
45
45
|
/* @__PURE__ */ t(
|
|
46
|
-
|
|
46
|
+
O,
|
|
47
47
|
{
|
|
48
48
|
renderAs: "primary",
|
|
49
49
|
tooltipItem: /* @__PURE__ */ t(m, { $renderAs: "ab3", $color: "WHITE", children: "HINT" }),
|
|
50
50
|
position: "left",
|
|
51
51
|
tooltipXCoOrdinates: "32.5%",
|
|
52
|
-
|
|
53
|
-
children: /* @__PURE__ */ t(p, { label: "hints", onClick: w, disabled: !d, children: /* @__PURE__ */ n(r, { $alignItems: "center", $justifyContent: "center", ref: E, children: [
|
|
54
|
-
/* @__PURE__ */ t(j, { width: 32, height: 32, $disabled: !d }),
|
|
55
|
-
/* @__PURE__ */ t(r, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ t(P, { width: 24, height: 1, background: "GREY_2" }) })
|
|
56
|
-
] }) })
|
|
52
|
+
children: /* @__PURE__ */ t(p, { label: "hints", onClick: w, disabled: !c, children: /* @__PURE__ */ t(n, { $alignItems: "center", $justifyContent: "center", ref: C, children: /* @__PURE__ */ t(j, { width: 32, height: 32, $disabled: !c }) }) })
|
|
57
53
|
}
|
|
58
54
|
),
|
|
55
|
+
/* @__PURE__ */ t(n, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ t(P, { width: 24, height: 1, background: "GREY_2" }) }),
|
|
59
56
|
/* @__PURE__ */ t(
|
|
60
|
-
|
|
57
|
+
O,
|
|
61
58
|
{
|
|
62
59
|
renderAs: "primary",
|
|
63
60
|
tooltipItem: /* @__PURE__ */ t(m, { $renderAs: "ab3", $color: "WHITE", children: "SOL" }),
|
|
64
61
|
position: "left",
|
|
65
62
|
tooltipXCoOrdinates: "32.5%",
|
|
66
63
|
tooltipYCoOrdinates: "5%",
|
|
67
|
-
children: /* @__PURE__ */ t(p, { label: "solution", onClick: R, disabled: !
|
|
64
|
+
children: /* @__PURE__ */ t(p, { label: "solution", onClick: R, disabled: !d, children: /* @__PURE__ */ t(n, { $alignItems: "center", $justifyContent: "center", ref: E, children: /* @__PURE__ */ t(x, { width: 32, height: 32, $disabled: !d }) }) })
|
|
68
65
|
}
|
|
69
66
|
),
|
|
70
67
|
e && T && b && /* @__PURE__ */ t(B, { topValue: T, leftValue: b }),
|
|
@@ -75,28 +72,28 @@ const ot = y(
|
|
|
75
72
|
$questionWidth: f,
|
|
76
73
|
$actionbarHeight: S,
|
|
77
74
|
$borderRadius: 10,
|
|
78
|
-
children: /* @__PURE__ */
|
|
79
|
-
|
|
75
|
+
children: /* @__PURE__ */ a(
|
|
76
|
+
q,
|
|
80
77
|
{
|
|
81
78
|
$gutterX: 1,
|
|
82
79
|
$gapX: 1,
|
|
83
80
|
$questionWidth: f,
|
|
84
81
|
$actionbarHeight: S,
|
|
85
82
|
children: [
|
|
86
|
-
/* @__PURE__ */ t(p, { label: "close", onClick: W, children: /* @__PURE__ */ t(
|
|
87
|
-
/* @__PURE__ */ t(
|
|
88
|
-
o && o.map((
|
|
89
|
-
o.length > 1 && /* @__PURE__ */
|
|
83
|
+
/* @__PURE__ */ t(p, { label: "close", onClick: W, children: /* @__PURE__ */ t(K, {}) }),
|
|
84
|
+
/* @__PURE__ */ t(n, { $gutterX: 0.5, children: /* @__PURE__ */ t(m, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: e === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
|
|
85
|
+
o && o.map((s, i) => /* @__PURE__ */ a(n, { $gutterX: 0.5, $gapX: 0.5, children: [
|
|
86
|
+
o.length > 1 && /* @__PURE__ */ a(m, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
|
|
90
87
|
e,
|
|
91
88
|
" ",
|
|
92
89
|
i + 1,
|
|
93
90
|
":"
|
|
94
91
|
] }),
|
|
95
92
|
/* @__PURE__ */ t(
|
|
96
|
-
|
|
93
|
+
U,
|
|
97
94
|
{
|
|
98
95
|
dangerouslySetInnerHTML: {
|
|
99
|
-
__html:
|
|
96
|
+
__html: s
|
|
100
97
|
}
|
|
101
98
|
}
|
|
102
99
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import {\n type RefObject,\n type FC,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useState,\n useRef,\n} from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\nimport {\n Section,\n GuideContainer,\n CloseIcon,\n SolIcon,\n HintIcon,\n SectionContainer,\n Guide,\n Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' | 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n actionbarHeight: number;\n plugins?: IWorksheetProps['plugins'];\n}\n\nconst QuestionGuide: FC<IQuestionGuideProps> = memo(\n ({\n questionWidth,\n questions,\n activeQuestionIndex,\n learnosity,\n actionbarHeight,\n loggerRef,\n plugins,\n }) => {\n const [activeSection, setActiveSection] = useState<TSections | undefined>();\n const [pointerPosition, setPointerPosition] = useState({\n top: 0,\n left: 0,\n });\n const { top, left } = pointerPosition;\n\n const handleHintClick = useCallback(() => {\n setActiveSection('HINT');\n loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n }, [loggerRef]);\n const handleSolClick = useCallback(() => {\n setActiveSection('SOL');\n loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n }, [loggerRef]);\n const handleClose = useCallback(() => {\n setActiveSection(() => undefined);\n }, []);\n\n const { hints, solution } = questions[activeQuestionIndex]?.metadata || {};\n\n const activeSectionData = useMemo(() => {\n return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n }, [activeSection, hints, solution]);\n\n const sqlRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;\n const hintRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;\n\n const updatePointerPosition = useCallback((ref: RefObject<HTMLDivElement>) => {\n if (ref.current) {\n const rect = ref.current.getBoundingClientRect();\n\n setPointerPosition({\n top: rect.top + rect.height / 2 - 8,\n left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n });\n }\n }, []);\n\n if (activeSection && activeSectionData && learnosity) {\n learnosity.renderMath('mathjax');\n }\n\n useEffect(() => {\n if (activeSection === 'HINT') {\n updatePointerPosition(hintRef);\n } else if (activeSection === 'SOL') {\n updatePointerPosition(sqlRef);\n } else if (!activeSectionData) {\n setActiveSection(undefined);\n }\n }, [activeSection, updatePointerPosition, activeSectionData]);\n\n return (\n <GuideContainer $background=\"WHITE\">\n {plugins?.stickers ?? null}\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n HINT\n </Text>\n }\n position=\"left\"\n tooltipXCoOrdinates={'32.5%'}\n tooltipYCoOrdinates={'-20%'}\n >\n <Clickable label=\"hints\" onClick={handleHintClick} disabled={!hints}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={hintRef}>\n <HintIcon width={32} height={32} $disabled={!hints} />\n <FlexView $gap={8} $alignItems=\"center\">\n <Separator width={24} height={1} background=\"GREY_2\" />\n </FlexView>\n </FlexView>\n </Clickable>\n </ArrowTooltip>\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n SOL\n </Text>\n }\n position=\"left\"\n tooltipXCoOrdinates={'32.5%'}\n tooltipYCoOrdinates={'5%'}\n >\n <Clickable label=\"solution\" onClick={handleSolClick} disabled={!solution}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={sqlRef}>\n <SolIcon width={32} height={32} $disabled={!solution} />\n </FlexView>\n </Clickable>\n </ArrowTooltip>\n {activeSection && top && left && <Pointer topValue={top} leftValue={left} />}\n {activeSection && (\n <SectionContainer\n $background=\"WHITE\"\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n $borderRadius={10}\n >\n <Section\n $gutterX={1}\n $gapX={1}\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n >\n <Clickable label=\"close\" onClick={handleClose}>\n <CloseIcon />\n </Clickable>\n <FlexView $gutterX={0.5}>\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection === 'HINT' ? 'HINTS:' : 'SOLUTION:'}\n </Text>\n </FlexView>\n {activeSectionData &&\n activeSectionData.map((item, index) => (\n <FlexView $gutterX={0.5} $gapX={0.5} key={index.toString()}>\n {activeSectionData.length > 1 && (\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection} {index + 1}:\n </Text>\n )}\n <Guide\n dangerouslySetInnerHTML={{\n __html: item,\n }}\n />\n </FlexView>\n ))}\n </Section>\n </SectionContainer>\n )}\n </GuideContainer>\n );\n },\n);\n\nexport default QuestionGuide;\n"],"names":["QuestionGuide","memo","questionWidth","questions","activeQuestionIndex","learnosity","actionbarHeight","loggerRef","plugins","activeSection","setActiveSection","useState","pointerPosition","setPointerPosition","top","left","handleHintClick","useCallback","EVENTS","handleSolClick","handleClose","hints","solution","_a","activeSectionData","useMemo","sqlRef","useRef","hintRef","updatePointerPosition","ref","rect","useEffect","jsxs","GuideContainer","jsx","ArrowTooltip","Text","Clickable","FlexView","HintIcon","Separator","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import {\n type RefObject,\n type FC,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useState,\n useRef,\n} from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\nimport {\n Section,\n GuideContainer,\n CloseIcon,\n SolIcon,\n HintIcon,\n SectionContainer,\n Guide,\n Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' | 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n actionbarHeight: number;\n plugins?: IWorksheetProps['plugins'];\n}\n\nconst QuestionGuide: FC<IQuestionGuideProps> = memo(\n ({\n questionWidth,\n questions,\n activeQuestionIndex,\n learnosity,\n actionbarHeight,\n loggerRef,\n plugins,\n }) => {\n const [activeSection, setActiveSection] = useState<TSections | undefined>();\n const [pointerPosition, setPointerPosition] = useState({\n top: 0,\n left: 0,\n });\n const { top, left } = pointerPosition;\n\n const handleHintClick = useCallback(() => {\n setActiveSection('HINT');\n loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n }, [loggerRef]);\n const handleSolClick = useCallback(() => {\n setActiveSection('SOL');\n loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n }, [loggerRef]);\n const handleClose = useCallback(() => {\n setActiveSection(() => undefined);\n }, []);\n\n const { hints, solution } = questions[activeQuestionIndex]?.metadata || {};\n\n const activeSectionData = useMemo(() => {\n return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n }, [activeSection, hints, solution]);\n\n const sqlRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;\n const hintRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;\n\n const updatePointerPosition = useCallback((ref: RefObject<HTMLDivElement>) => {\n if (ref.current) {\n const rect = ref.current.getBoundingClientRect();\n\n setPointerPosition({\n top: rect.top + rect.height / 2 - 8,\n left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n });\n }\n }, []);\n\n if (activeSection && activeSectionData && learnosity) {\n learnosity.renderMath('mathjax');\n }\n\n useEffect(() => {\n if (activeSection === 'HINT') {\n updatePointerPosition(hintRef);\n } else if (activeSection === 'SOL') {\n updatePointerPosition(sqlRef);\n } else if (!activeSectionData) {\n setActiveSection(undefined);\n }\n }, [activeSection, updatePointerPosition, activeSectionData]);\n\n return (\n <GuideContainer $background=\"WHITE\">\n {plugins?.stickers ?? null}\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n HINT\n </Text>\n }\n position=\"left\"\n tooltipXCoOrdinates={'32.5%'}\n >\n <Clickable label=\"hints\" onClick={handleHintClick} disabled={!hints}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={hintRef}>\n <HintIcon width={32} height={32} $disabled={!hints} />\n </FlexView>\n </Clickable>\n </ArrowTooltip>\n <FlexView $gap={8} $alignItems=\"center\">\n <Separator width={24} height={1} background=\"GREY_2\" />\n </FlexView>\n <ArrowTooltip\n renderAs=\"primary\"\n tooltipItem={\n <Text $renderAs=\"ab3\" $color=\"WHITE\">\n SOL\n </Text>\n }\n position=\"left\"\n tooltipXCoOrdinates={'32.5%'}\n tooltipYCoOrdinates={'5%'}\n >\n <Clickable label=\"solution\" onClick={handleSolClick} disabled={!solution}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={sqlRef}>\n <SolIcon width={32} height={32} $disabled={!solution} />\n </FlexView>\n </Clickable>\n </ArrowTooltip>\n {activeSection && top && left && <Pointer topValue={top} leftValue={left} />}\n {activeSection && (\n <SectionContainer\n $background=\"WHITE\"\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n $borderRadius={10}\n >\n <Section\n $gutterX={1}\n $gapX={1}\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n >\n <Clickable label=\"close\" onClick={handleClose}>\n <CloseIcon />\n </Clickable>\n <FlexView $gutterX={0.5}>\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection === 'HINT' ? 'HINTS:' : 'SOLUTION:'}\n </Text>\n </FlexView>\n {activeSectionData &&\n activeSectionData.map((item, index) => (\n <FlexView $gutterX={0.5} $gapX={0.5} key={index.toString()}>\n {activeSectionData.length > 1 && (\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection} {index + 1}:\n </Text>\n )}\n <Guide\n dangerouslySetInnerHTML={{\n __html: item,\n }}\n />\n </FlexView>\n ))}\n </Section>\n </SectionContainer>\n )}\n </GuideContainer>\n );\n },\n);\n\nexport default QuestionGuide;\n"],"names":["QuestionGuide","memo","questionWidth","questions","activeQuestionIndex","learnosity","actionbarHeight","loggerRef","plugins","activeSection","setActiveSection","useState","pointerPosition","setPointerPosition","top","left","handleHintClick","useCallback","EVENTS","handleSolClick","handleClose","hints","solution","_a","activeSectionData","useMemo","sqlRef","useRef","hintRef","updatePointerPosition","ref","rect","useEffect","jsxs","GuideContainer","jsx","ArrowTooltip","Text","Clickable","FlexView","HintIcon","Separator","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"mappings":"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"}
|