@cuemath/leap 3.1.34-aa2 → 3.1.34
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.
|
@@ -1,69 +1,71 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { memo as v, useState as T, useCallback as h, useMemo as X, useRef as H, useEffect as N } from "react";
|
|
3
|
+
import $ from "../../../ui/buttons/clickable/clickable.js";
|
|
4
4
|
import c from "../../../ui/layout/flex-view.js";
|
|
5
|
-
import
|
|
5
|
+
import y from "../../../ui/separator/separator.js";
|
|
6
6
|
import u from "../../../ui/text/text.js";
|
|
7
|
-
import
|
|
8
|
-
import { GuideContainer as
|
|
9
|
-
const Z =
|
|
10
|
-
({ questionWidth:
|
|
7
|
+
import _ from "../../constants/events.js";
|
|
8
|
+
import { GuideContainer as P, HintIcon as V, SolIcon as j, Pointer as x, SectionContainer as B, Section as W, CloseIcon as K, Guide as M } from "./worksheet-sidebar-styled.js";
|
|
9
|
+
const Z = v(
|
|
10
|
+
({ questionWidth: f, questions: O, activeQuestionIndex: k, learnosity: S, actionbarHeight: p, loggerRef: l }) => {
|
|
11
11
|
var C;
|
|
12
|
-
const [t, s] = T(), [
|
|
12
|
+
const [t, s] = T(), [A, R] = T({
|
|
13
13
|
top: 0,
|
|
14
14
|
left: 0
|
|
15
|
-
}), { top: g, left: b } =
|
|
16
|
-
s("HINT"), l.current(
|
|
17
|
-
}, [l]), w = h(() => {
|
|
18
|
-
s("SOL"), l.current(N.WORKSHEET_V3_SOLUTION_SEEN);
|
|
15
|
+
}), { top: g, left: b } = A, w = h(() => {
|
|
16
|
+
s("HINT"), l.current(_.WORKSHEET_V3_HINT_SEEN);
|
|
19
17
|
}, [l]), G = h(() => {
|
|
18
|
+
s("SOL"), l.current(_.WORKSHEET_V3_SOLUTION_SEEN);
|
|
19
|
+
}, [l]), L = h(() => {
|
|
20
20
|
s(() => {
|
|
21
21
|
});
|
|
22
|
-
}, []), { hints: n, solution: d } = ((C =
|
|
22
|
+
}, []), { hints: n, solution: d } = ((C = O[k]) == null ? void 0 : C.metadata) || {}, r = X(() => t === void 0 ? void 0 : t === "HINT" ? n : d, [t, n, d]), E = H(null), I = H(null), m = h((a) => {
|
|
23
23
|
if (a.current) {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
top:
|
|
27
|
-
left:
|
|
24
|
+
const o = a.current.getBoundingClientRect();
|
|
25
|
+
R({
|
|
26
|
+
top: o.top + o.height / 2 - 8,
|
|
27
|
+
left: o.right - 78
|
|
28
28
|
// 52px (sidebar width) + 16px (gutter) + 10px
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
}, []);
|
|
32
|
-
return
|
|
33
|
-
|
|
34
|
-
}, [
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
return N(() => {
|
|
33
|
+
r || s(void 0), S.renderMath("mathjax");
|
|
34
|
+
}, [r, S]), N(() => {
|
|
35
|
+
t === "HINT" ? m(I) : t === "SOL" && m(E);
|
|
36
|
+
}, [t, m]), /* @__PURE__ */ i(P, { $background: "WHITE", children: [
|
|
37
|
+
/* @__PURE__ */ e($, { label: "hints", onClick: w, disabled: !n, children: /* @__PURE__ */ i(c, { $alignItems: "center", $justifyContent: "center", ref: I, children: [
|
|
38
|
+
/* @__PURE__ */ e(V, { width: 32, height: 32, $disabled: !n }),
|
|
37
39
|
/* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "HINT" }),
|
|
38
|
-
/* @__PURE__ */ e(c, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(
|
|
40
|
+
/* @__PURE__ */ e(c, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(y, { width: 24, height: 1, background: "GREY_2" }) })
|
|
39
41
|
] }) }),
|
|
40
|
-
/* @__PURE__ */ e(
|
|
41
|
-
/* @__PURE__ */ e(
|
|
42
|
+
/* @__PURE__ */ e($, { label: "solution", onClick: G, disabled: !d, children: /* @__PURE__ */ i(c, { $alignItems: "center", $justifyContent: "center", ref: E, children: [
|
|
43
|
+
/* @__PURE__ */ e(j, { width: 32, height: 32, $disabled: !d }),
|
|
42
44
|
/* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "SOL" })
|
|
43
45
|
] }) }),
|
|
44
|
-
t && g && b && /* @__PURE__ */ e(
|
|
46
|
+
t && g && b && /* @__PURE__ */ e(x, { topValue: g, leftValue: b }),
|
|
45
47
|
t && /* @__PURE__ */ e(
|
|
46
48
|
B,
|
|
47
49
|
{
|
|
48
50
|
$background: "WHITE",
|
|
49
|
-
$questionWidth:
|
|
51
|
+
$questionWidth: f,
|
|
50
52
|
$actionbarHeight: p,
|
|
51
53
|
$borderRadius: 10,
|
|
52
|
-
children: /* @__PURE__ */
|
|
54
|
+
children: /* @__PURE__ */ i(
|
|
53
55
|
W,
|
|
54
56
|
{
|
|
55
57
|
$gutterX: 1,
|
|
56
58
|
$gapX: 1,
|
|
57
|
-
$questionWidth:
|
|
59
|
+
$questionWidth: f,
|
|
58
60
|
$actionbarHeight: p,
|
|
59
61
|
children: [
|
|
60
|
-
/* @__PURE__ */ e(
|
|
62
|
+
/* @__PURE__ */ e($, { label: "close", onClick: L, children: /* @__PURE__ */ e(K, {}) }),
|
|
61
63
|
/* @__PURE__ */ e(c, { $gutterX: 0.5, children: /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
+
r && r.map((a, o) => /* @__PURE__ */ i(c, { $gutterX: 0.5, $gapX: 0.5, children: [
|
|
65
|
+
r.length > 1 && /* @__PURE__ */ i(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
|
|
64
66
|
t,
|
|
65
67
|
" ",
|
|
66
|
-
|
|
68
|
+
o + 1,
|
|
67
69
|
":"
|
|
68
70
|
] }),
|
|
69
71
|
/* @__PURE__ */ e(
|
|
@@ -74,7 +76,7 @@ const Z = L(
|
|
|
74
76
|
}
|
|
75
77
|
}
|
|
76
78
|
)
|
|
77
|
-
] },
|
|
79
|
+
] }, o.toString()))
|
|
78
80
|
]
|
|
79
81
|
}
|
|
80
82
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\n\nimport React, { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react';\n\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 {\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}\n\nconst QuestionGuide: React.FC<IQuestionGuideProps> = memo(\n ({ questionWidth, questions, activeQuestionIndex, learnosity, actionbarHeight, loggerRef }) => {\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);\n const hintRef = useRef<HTMLDivElement>(null);\n\n const updatePointerPosition = useCallback((ref: React.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 (
|
|
1
|
+
{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\n\nimport React, { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react';\n\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 {\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}\n\nconst QuestionGuide: React.FC<IQuestionGuideProps> = memo(\n ({ questionWidth, questions, activeQuestionIndex, learnosity, actionbarHeight, loggerRef }) => {\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);\n const hintRef = useRef<HTMLDivElement>(null);\n\n const updatePointerPosition = useCallback((ref: React.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 useEffect(() => {\n if (!activeSectionData) {\n setActiveSection(undefined);\n }\n learnosity.renderMath('mathjax');\n }, [activeSectionData, learnosity]);\n\n useEffect(() => {\n if (activeSection === 'HINT') {\n updatePointerPosition(hintRef);\n } else if (activeSection === 'SOL') {\n updatePointerPosition(sqlRef);\n }\n }, [activeSection, updatePointerPosition]);\n\n return (\n <GuideContainer $background=\"WHITE\">\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 <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n HINT\n </Text>\n <FlexView $gap={8} $alignItems=\"center\">\n <Separator width={24} height={1} background=\"GREY_2\" />\n </FlexView>\n </FlexView>\n </Clickable>\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 <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n SOL\n </Text>\n </FlexView>\n </Clickable>\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","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","Clickable","FlexView","HintIcon","Text","Separator","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"mappings":"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"}
|