@cuemath/leap 3.1.39 → 3.1.40
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,39 +1,39 @@
|
|
|
1
1
|
import { jsx as n, jsxs as $ } from "react/jsx-runtime";
|
|
2
|
-
import { memo as g, useRef as
|
|
2
|
+
import { memo as g, useRef as f, useState as C, useMemo as E, useCallback as T, useLayoutEffect as k, useEffect as I } from "react";
|
|
3
3
|
import l from "styled-components";
|
|
4
4
|
import w from "../../../assets/line-icons/icons/up.js";
|
|
5
5
|
import y from "../../ui/buttons/clickable/clickable.js";
|
|
6
6
|
import p from "../../ui/layout/flex-view.js";
|
|
7
|
-
import { ACTION_BAR_HEIGHT as
|
|
7
|
+
import { ACTION_BAR_HEIGHT as u } from "./constants.js";
|
|
8
8
|
import { CustomElement as _ } from "./worksheet-question/worksheet-question-styled.js";
|
|
9
9
|
const R = l(p)(({ $isExpanded: r, theme: t }) => {
|
|
10
|
-
const { layout: a, colors:
|
|
10
|
+
const { layout: a, colors: o, zIndex: d } = t;
|
|
11
11
|
return `
|
|
12
12
|
position: absolute;
|
|
13
13
|
bottom: 0px;
|
|
14
14
|
z-index: ${d.QUESTION_TIPS};
|
|
15
|
-
max-height: calc(${a.gutter * 2}px + ${
|
|
15
|
+
max-height: calc(${a.gutter * 2}px + ${u}px);
|
|
16
16
|
|
|
17
17
|
border-radius: 6px 6px 0px 0px;
|
|
18
|
-
background: ${
|
|
18
|
+
background: ${o.REAL_BLACK_60};
|
|
19
19
|
backdrop-filter: blur(8px);
|
|
20
20
|
align-self: center;
|
|
21
21
|
|
|
22
22
|
${r && `
|
|
23
|
-
max-height: calc(${a.gutter * 15.625}px + ${
|
|
23
|
+
max-height: calc(${a.gutter * 15.625}px + ${u}px);
|
|
24
24
|
overflow-y: auto;
|
|
25
25
|
|
|
26
26
|
@supports selector(::-webkit-scrollbar) {
|
|
27
27
|
&::-webkit-scrollbar {
|
|
28
28
|
border-top-right-radius: 6px;
|
|
29
29
|
width: 8px;
|
|
30
|
-
background-color: ${
|
|
30
|
+
background-color: ${o.WHITE};
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
&::-webkit-scrollbar-thumb {
|
|
34
34
|
border-top-right-radius: 6px;
|
|
35
35
|
border-bottom-right-radius: 6px;
|
|
36
|
-
background: ${
|
|
36
|
+
background: ${o.REAL_BLACK_60};
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
`}
|
|
@@ -47,7 +47,7 @@ const R = l(p)(({ $isExpanded: r, theme: t }) => {
|
|
|
47
47
|
`, H = l(_)(
|
|
48
48
|
({ theme: r, $isExpanded: t }) => `
|
|
49
49
|
color: ${r.colors.WHITE};
|
|
50
|
-
padding: 0px 0px ${
|
|
50
|
+
padding: 0px 0px ${u}px;
|
|
51
51
|
${t ? "" : "& > * { display: inline; }"}
|
|
52
52
|
font-family: 'UntitledSans-Regular';
|
|
53
53
|
|
|
@@ -66,13 +66,15 @@ const R = l(p)(({ $isExpanded: r, theme: t }) => {
|
|
|
66
66
|
transition: transform 0.3s ease;
|
|
67
67
|
color: ${t.colors.WHITE};
|
|
68
68
|
cursor: pointer;
|
|
69
|
-
`), G = g(({ width: r, question: t, userType: a, learnosity:
|
|
70
|
-
const d =
|
|
69
|
+
`), G = g(({ width: r, question: t, userType: a, learnosity: o }) => {
|
|
70
|
+
const d = f(null), c = f(null), m = f(""), [i, x] = C(!1), { teacher_tips: e } = (t == null ? void 0 : t.metadata) || {};
|
|
71
|
+
e && o.renderMath("mathjax");
|
|
72
|
+
const s = E(() => e == null ? void 0 : e.toString(), [e]), b = T(() => {
|
|
71
73
|
m.current && c.current && x((h) => !h);
|
|
72
74
|
}, []);
|
|
73
75
|
return k(() => {
|
|
74
|
-
c.current &&
|
|
75
|
-
}, [
|
|
76
|
+
c.current && e && (m.current = c.current.textContent);
|
|
77
|
+
}, [o, e]), I(() => {
|
|
76
78
|
s || x(!1);
|
|
77
79
|
}, [s]), a !== "TEACHER" || !s ? null : /* @__PURE__ */ n(R, { ref: d, $width: r, $isExpanded: i, children: /* @__PURE__ */ n(y, { label: "Teacher Tip", onClick: i ? void 0 : b, children: /* @__PURE__ */ $(A, { $flexDirection: "row", $flexGap: 10, $justifyContent: "space-between", children: [
|
|
78
80
|
/* @__PURE__ */ n(p, { $flexDirection: "row", $flexGap: 5, children: /* @__PURE__ */ n(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"question-tips.js","sources":["../../../../src/features/worksheet/worksheet/question-tips.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { ILearnosity, IWorksheetQuestion } from './worksheet-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport UpIcon from '../../../assets/line-icons/icons/up';\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ACTION_BAR_HEIGHT } from './constants';\nimport { CustomElement } from './worksheet-question/worksheet-question-styled';\n\ntype TStyledComponentProps = {\n $isExpanded: boolean;\n};\n\nconst Wrapper = styled(FlexView)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n const { layout, colors, zIndex } = theme;\n\n return `\n position: absolute;\n bottom: 0px;\n z-index: ${zIndex.QUESTION_TIPS};\n max-height: calc(${layout.gutter * 2}px + ${ACTION_BAR_HEIGHT}px);\n \n border-radius: 6px 6px 0px 0px;\n background: ${colors.REAL_BLACK_60};\n backdrop-filter: blur(8px);\n align-self: center;\n \n ${\n $isExpanded &&\n `\n max-height: calc(${layout.gutter * 15.625}px + ${ACTION_BAR_HEIGHT}px);\n overflow-y: auto;\n\n @supports selector(::-webkit-scrollbar) {\n &::-webkit-scrollbar {\n border-top-right-radius: 6px;\n width: 8px;\n background-color: ${colors.WHITE};\n }\n \n &::-webkit-scrollbar-thumb {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n background: ${colors.REAL_BLACK_60};\n }\n }\n `\n }\n `;\n});\n\nconst Header = styled(FlexView)`\n padding: 8px 12px;\n\n & * {\n background-color: transparent !important;\n }\n`;\n\nconst TipText = styled(CustomElement)<TStyledComponentProps>(\n ({ theme, $isExpanded }) => `\n color: ${theme.colors.WHITE};\n padding: 0px 0px ${ACTION_BAR_HEIGHT}px;\n ${$isExpanded ? '' : `& > * { display: inline; }`}\n font-family: 'UntitledSans-Regular';\n\n &::before {\n content: 'CUE DON’T TELL:';\n font-family: 'Athletics-Bold';\n margin-right: 8px;\n ${$isExpanded ? ` display: block; margin-bottom: 8px;` : ''}\n }\n `,\n);\n\nconst ChevIconWrapper = styled(FlexView)`\n position: sticky;\n top: 8px;\n`;\n\nconst ChevIcon = styled(UpIcon)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n return `\n transform: rotate(${$isExpanded ? 180 : 0}deg);\n transition: transform 0.3s ease;\n color: ${theme.colors.WHITE};\n cursor: pointer;\n `;\n});\n\ninterface IQuestionTips {\n width: number | string;\n userType: TUserTypes;\n learnosity: ILearnosity;\n question?: IWorksheetQuestion;\n}\n\nconst QuestionTips: FC<IQuestionTips> = memo(({ width, question, userType, learnosity }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const tipRef = useRef<HTMLDivElement>(null);\n const tipContentRef = useRef<string | null>('');\n\n const [menuVisible, setMenuVisible] = useState(false);\n\n const { teacher_tips: tips } = question?.metadata || {};\n\n const tipsMemoized = useMemo(() => {\n return tips?.toString();\n }, [tips]);\n\n const handleClick = useCallback(() => {\n if (tipContentRef.current && tipRef.current) {\n setMenuVisible(prev => !prev);\n }\n }, []);\n\n useLayoutEffect(() => {\n if (tipRef.current && tips) {\n tipContentRef.current = tipRef.current.textContent;\n
|
|
1
|
+
{"version":3,"file":"question-tips.js","sources":["../../../../src/features/worksheet/worksheet/question-tips.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { ILearnosity, IWorksheetQuestion } from './worksheet-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport UpIcon from '../../../assets/line-icons/icons/up';\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ACTION_BAR_HEIGHT } from './constants';\nimport { CustomElement } from './worksheet-question/worksheet-question-styled';\n\ntype TStyledComponentProps = {\n $isExpanded: boolean;\n};\n\nconst Wrapper = styled(FlexView)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n const { layout, colors, zIndex } = theme;\n\n return `\n position: absolute;\n bottom: 0px;\n z-index: ${zIndex.QUESTION_TIPS};\n max-height: calc(${layout.gutter * 2}px + ${ACTION_BAR_HEIGHT}px);\n \n border-radius: 6px 6px 0px 0px;\n background: ${colors.REAL_BLACK_60};\n backdrop-filter: blur(8px);\n align-self: center;\n \n ${\n $isExpanded &&\n `\n max-height: calc(${layout.gutter * 15.625}px + ${ACTION_BAR_HEIGHT}px);\n overflow-y: auto;\n\n @supports selector(::-webkit-scrollbar) {\n &::-webkit-scrollbar {\n border-top-right-radius: 6px;\n width: 8px;\n background-color: ${colors.WHITE};\n }\n \n &::-webkit-scrollbar-thumb {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n background: ${colors.REAL_BLACK_60};\n }\n }\n `\n }\n `;\n});\n\nconst Header = styled(FlexView)`\n padding: 8px 12px;\n\n & * {\n background-color: transparent !important;\n }\n`;\n\nconst TipText = styled(CustomElement)<TStyledComponentProps>(\n ({ theme, $isExpanded }) => `\n color: ${theme.colors.WHITE};\n padding: 0px 0px ${ACTION_BAR_HEIGHT}px;\n ${$isExpanded ? '' : `& > * { display: inline; }`}\n font-family: 'UntitledSans-Regular';\n\n &::before {\n content: 'CUE DON’T TELL:';\n font-family: 'Athletics-Bold';\n margin-right: 8px;\n ${$isExpanded ? ` display: block; margin-bottom: 8px;` : ''}\n }\n `,\n);\n\nconst ChevIconWrapper = styled(FlexView)`\n position: sticky;\n top: 8px;\n`;\n\nconst ChevIcon = styled(UpIcon)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n return `\n transform: rotate(${$isExpanded ? 180 : 0}deg);\n transition: transform 0.3s ease;\n color: ${theme.colors.WHITE};\n cursor: pointer;\n `;\n});\n\ninterface IQuestionTips {\n width: number | string;\n userType: TUserTypes;\n learnosity: ILearnosity;\n question?: IWorksheetQuestion;\n}\n\nconst QuestionTips: FC<IQuestionTips> = memo(({ width, question, userType, learnosity }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const tipRef = useRef<HTMLDivElement>(null);\n const tipContentRef = useRef<string | null>('');\n\n const [menuVisible, setMenuVisible] = useState(false);\n\n const { teacher_tips: tips } = question?.metadata || {};\n\n if (tips) {\n learnosity.renderMath('mathjax');\n }\n\n const tipsMemoized = useMemo(() => {\n return tips?.toString();\n }, [tips]);\n\n const handleClick = useCallback(() => {\n if (tipContentRef.current && tipRef.current) {\n setMenuVisible(prev => !prev);\n }\n }, []);\n\n useLayoutEffect(() => {\n if (tipRef.current && tips) {\n tipContentRef.current = tipRef.current.textContent;\n }\n }, [learnosity, tips]);\n\n useEffect(() => {\n if (!tipsMemoized) {\n setMenuVisible(false);\n }\n }, [tipsMemoized]);\n\n if (userType !== 'TEACHER' || !tipsMemoized) return null;\n\n return (\n <Wrapper ref={containerRef} $width={width} $isExpanded={menuVisible}>\n <Clickable label=\"Teacher Tip\" onClick={!menuVisible ? handleClick : undefined}>\n <Header $flexDirection=\"row\" $flexGap={10} $justifyContent=\"space-between\">\n <FlexView $flexDirection=\"row\" $flexGap={5}>\n <TipText\n ref={tipRef}\n dangerouslySetInnerHTML={{ __html: tipsMemoized }}\n $isExpanded={menuVisible}\n />\n </FlexView>\n\n <ChevIconWrapper $width={20} $height={20}>\n <ChevIcon $isExpanded={menuVisible} onClick={menuVisible ? handleClick : undefined} />\n </ChevIconWrapper>\n </Header>\n </Clickable>\n </Wrapper>\n );\n});\n\nexport default QuestionTips;\n"],"names":["Wrapper","styled","FlexView","$isExpanded","theme","layout","colors","zIndex","ACTION_BAR_HEIGHT","Header","TipText","CustomElement","ChevIconWrapper","ChevIcon","UpIcon","QuestionTips","memo","width","question","userType","learnosity","containerRef","useRef","tipRef","tipContentRef","menuVisible","setMenuVisible","useState","tips","tipsMemoized","useMemo","handleClick","useCallback","prev","useLayoutEffect","useEffect","jsx","Clickable","jsxs"],"mappings":";;;;;;;;AAiBA,MAAMA,IAAUC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,aAAAC,GAAa,OAAAC,QAAY;AAClF,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,QAAAC,EAAA,IAAWH;AAE5B,SAAA;AAAA;AAAA;AAAA,eAGMG,EAAO,aAAa;AAAA,uBACZF,EAAO,SAAS,CAAC,QAAQG,CAAiB;AAAA;AAAA;AAAA,kBAG/CF,EAAO,aAAa;AAAA;AAAA;AAAA;AAAA,MAKhCH,KACA;AAAA,2BACqBE,EAAO,SAAS,MAAM,QAAQG,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAO1CF,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMlBA,EAAO,aAAa;AAAA;AAAA;AAAA,OAI1C;AAAA;AAEJ,CAAC,GAEKG,IAASR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBQ,IAAUT,EAAOU,CAAa;AAAA,EAClC,CAAC,EAAE,OAAAP,GAAO,aAAAD,EAAA,MAAkB;AAAA,aACjBC,EAAM,OAAO,KAAK;AAAA,uBACRI,CAAiB;AAAA,MAClCL,IAAc,KAAK,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAO7CA,IAAc,yCAAyC,EAAE;AAAA;AAAA;AAGjE,GAEMS,IAAkBX,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCW,IAAWZ,EAAOa,CAAM,EAAyB,CAAC,EAAE,aAAAX,GAAa,OAAAC,QAC9D;AAAA,wBACeD,IAAc,MAAM,CAAC;AAAA;AAAA,aAEhCC,EAAM,OAAO,KAAK;AAAA;AAAA,GAG9B,GASKW,IAAkCC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,YAAAC,QAAiB;AACpF,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAASD,EAAuB,IAAI,GACpCE,IAAgBF,EAAsB,EAAE,GAExC,CAACG,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9C,EAAE,cAAcC,EAAA,KAASV,KAAA,gBAAAA,EAAU,aAAY,CAAA;AAErD,EAAIU,KACFR,EAAW,WAAW,SAAS;AAG3B,QAAAS,IAAeC,EAAQ,MACpBF,KAAA,gBAAAA,EAAM,YACZ,CAACA,CAAI,CAAC,GAEHG,IAAcC,EAAY,MAAM;AAChC,IAAAR,EAAc,WAAWD,EAAO,WACnBG,EAAA,CAAAO,MAAQ,CAACA,CAAI;AAAA,EAEhC,GAAG,CAAE,CAAA;AAcL,SAZAC,EAAgB,MAAM;AAChB,IAAAX,EAAO,WAAWK,MACNJ,EAAA,UAAUD,EAAO,QAAQ;AAAA,EACzC,GACC,CAACH,GAAYQ,CAAI,CAAC,GAErBO,EAAU,MAAM;AACd,IAAKN,KACHH,EAAe,EAAK;AAAA,EACtB,GACC,CAACG,CAAY,CAAC,GAEbV,MAAa,aAAa,CAACU,IAAqB,OAGlD,gBAAAO,EAACpC,GAAQ,EAAA,KAAKqB,GAAc,QAAQJ,GAAO,aAAaQ,GACtD,UAAC,gBAAAW,EAAAC,GAAA,EAAU,OAAM,eAAc,SAAUZ,IAA4B,SAAdM,GACrD,UAAC,gBAAAO,EAAA7B,GAAA,EAAO,gBAAe,OAAM,UAAU,IAAI,iBAAgB,iBACzD,UAAA;AAAA,IAAA,gBAAA2B,EAAClC,GAAS,EAAA,gBAAe,OAAM,UAAU,GACvC,UAAA,gBAAAkC;AAAA,MAAC1B;AAAA,MAAA;AAAA,QACC,KAAKa;AAAA,QACL,yBAAyB,EAAE,QAAQM,EAAa;AAAA,QAChD,aAAaJ;AAAA,MAAA;AAAA,IAAA,GAEjB;AAAA,IAEC,gBAAAW,EAAAxB,GAAA,EAAgB,QAAQ,IAAI,SAAS,IACpC,UAAA,gBAAAwB,EAACvB,GAAS,EAAA,aAAaY,GAAa,SAASA,IAAcM,IAAc,OAAW,CAAA,GACtF;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ,CAAC;"}
|