@cuemath/leap 3.4.3 → 3.4.4
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/stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.js
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
import { jsxs as l, jsx as e
|
|
1
|
+
import { jsxs as l, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback as m, useMemo as h } from "react";
|
|
3
3
|
import { JOURNEY_ID_TEACHER as t } from "../../../../journey/journey-id/journey-id-teacher.js";
|
|
4
4
|
import { IndicatorType as C } from "../../../../journey/use-journey/constants.js";
|
|
5
5
|
import { useJourney as T } from "../../../../journey/use-journey/use-journey.js";
|
|
6
6
|
import y from "../../../../ui/buttons/button/button.js";
|
|
7
|
-
import
|
|
7
|
+
import O from "../../../../ui/layout/flex-view.js";
|
|
8
8
|
import S from "../../../../ui/separator/separator.js";
|
|
9
|
-
import
|
|
9
|
+
import u from "../../../../ui/text/text.js";
|
|
10
10
|
const x = ({
|
|
11
11
|
triggerRef: o,
|
|
12
|
+
triggerElement: n,
|
|
12
13
|
tooltipConfig: r
|
|
13
14
|
}) => {
|
|
14
|
-
const { setJourney:
|
|
15
|
-
|
|
16
|
-
}, [
|
|
15
|
+
const { setJourney: a, nextCoachmark: s, endJourney: i } = T(), d = m(() => {
|
|
16
|
+
i(t.STICKERS_INTRO_JOURNEY);
|
|
17
|
+
}, [i]), c = m(() => {
|
|
17
18
|
if (!o.current) return;
|
|
18
19
|
const p = {
|
|
19
20
|
position: r.position,
|
|
@@ -24,9 +25,9 @@ const x = ({
|
|
|
24
25
|
borderColor: "BLACK",
|
|
25
26
|
arrowColor: "BLACK",
|
|
26
27
|
backgroundColor: "PURPLE_4",
|
|
27
|
-
tooltipItem: /* @__PURE__ */ l(
|
|
28
|
-
/* @__PURE__ */ e(
|
|
29
|
-
|
|
28
|
+
tooltipItem: /* @__PURE__ */ l(O, { children: [
|
|
29
|
+
/* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(
|
|
30
|
+
u,
|
|
30
31
|
{
|
|
31
32
|
$renderOnMobileAs: "ab3",
|
|
32
33
|
$renderAs: "ab3",
|
|
@@ -34,7 +35,7 @@ const x = ({
|
|
|
34
35
|
$inline: !0,
|
|
35
36
|
$whiteSpace: "normal",
|
|
36
37
|
children: [
|
|
37
|
-
/* @__PURE__ */ e(
|
|
38
|
+
/* @__PURE__ */ e(u, { $renderAs: "ab3-bold", as: "span", $inline: !0, children: "New Stickers" }),
|
|
38
39
|
" ",
|
|
39
40
|
"- Use them to celebrate little moments of joy!"
|
|
40
41
|
]
|
|
@@ -48,20 +49,36 @@ const x = ({
|
|
|
48
49
|
label: "Got It",
|
|
49
50
|
size: "xsmall",
|
|
50
51
|
width: "50%",
|
|
51
|
-
onClick:
|
|
52
|
+
onClick: d
|
|
52
53
|
}
|
|
53
54
|
)
|
|
54
55
|
] })
|
|
55
56
|
};
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
57
|
+
a(
|
|
58
|
+
t.STICKERS_INTRO_JOURNEY,
|
|
59
|
+
[
|
|
60
|
+
{
|
|
61
|
+
originalElementToHighlightRef: o,
|
|
62
|
+
type: C.TOOLTIP,
|
|
63
|
+
elementToHighlight: n,
|
|
64
|
+
indicator: p
|
|
65
|
+
}
|
|
66
|
+
],
|
|
67
|
+
void 0,
|
|
68
|
+
!1
|
|
69
|
+
), s(t.STICKERS_INTRO_JOURNEY);
|
|
70
|
+
}, [
|
|
71
|
+
o,
|
|
72
|
+
n,
|
|
73
|
+
r.position,
|
|
74
|
+
r.tooltipXCoOrdinates,
|
|
75
|
+
r.tooltipYCoOrdinates,
|
|
76
|
+
r.arrowXCoOrdinates,
|
|
77
|
+
r.arrowYCoOrdinates,
|
|
78
|
+
d,
|
|
79
|
+
a,
|
|
80
|
+
s
|
|
81
|
+
]);
|
|
65
82
|
return h(
|
|
66
83
|
() => ({
|
|
67
84
|
startTeacherStickersJourney: c
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-stickers-journey.js","sources":["../../../../../../src/features/stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { JOURNEY_ID_TEACHER } from '../../../../journey/journey-id/journey-id-teacher';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport Button from '../../../../ui/buttons/button/button';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport type { IUseTeacherStickersJourneyProps } from './use-stickers-journey-types';\n\nexport const useStickersJourney = ({\n triggerRef,\n tooltipConfig,\n}: IUseTeacherStickersJourneyProps) => {\n const { setJourney, nextCoachmark, endJourney } = useJourney();\n\n const endTeacherStickersOnboarding = useCallback(() => {\n endJourney(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY);\n }, [endJourney]);\n\n const startTeacherStickersJourney = useCallback(() => {\n if (!triggerRef.current) return;\n\n const indicatorPayload = {\n position: tooltipConfig.position,\n tooltipXCoOrdinates: tooltipConfig.tooltipXCoOrdinates,\n tooltipYCoOrdinates: tooltipConfig.tooltipYCoOrdinates,\n arrowXCoOrdinates: tooltipConfig.arrowXCoOrdinates,\n arrowYCoOrdinates: tooltipConfig.arrowYCoOrdinates,\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n backgroundColor: 'PURPLE_4',\n tooltipItem: (\n <FlexView>\n <FlexView>\n <Text\n $renderOnMobileAs=\"ab3\"\n $renderAs=\"ab3\"\n as=\"span\"\n $inline={true}\n $whiteSpace=\"normal\"\n >\n <Text $renderAs=\"ab3-bold\" as=\"span\" $inline={true}>\n New Stickers\n </Text>{' '}\n - Use them to celebrate little moments of joy!\n </Text>\n </FlexView>\n <Separator height={10} />\n <Button\n renderAs=\"secondary\"\n label=\"Got It\"\n size=\"xsmall\"\n width=\"50%\"\n onClick={endTeacherStickersOnboarding}\n />\n </FlexView>\n ),\n } as IArrowTooltipProps;\n\n setJourney(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY
|
|
1
|
+
{"version":3,"file":"use-stickers-journey.js","sources":["../../../../../../src/features/stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { JOURNEY_ID_TEACHER } from '../../../../journey/journey-id/journey-id-teacher';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport Button from '../../../../ui/buttons/button/button';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport type { IUseTeacherStickersJourneyProps } from './use-stickers-journey-types';\n\nexport const useStickersJourney = ({\n triggerRef,\n triggerElement,\n tooltipConfig,\n}: IUseTeacherStickersJourneyProps) => {\n const { setJourney, nextCoachmark, endJourney } = useJourney();\n\n const endTeacherStickersOnboarding = useCallback(() => {\n endJourney(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY);\n }, [endJourney]);\n\n const startTeacherStickersJourney = useCallback(() => {\n if (!triggerRef.current) return;\n\n const indicatorPayload = {\n position: tooltipConfig.position,\n tooltipXCoOrdinates: tooltipConfig.tooltipXCoOrdinates,\n tooltipYCoOrdinates: tooltipConfig.tooltipYCoOrdinates,\n arrowXCoOrdinates: tooltipConfig.arrowXCoOrdinates,\n arrowYCoOrdinates: tooltipConfig.arrowYCoOrdinates,\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n backgroundColor: 'PURPLE_4',\n tooltipItem: (\n <FlexView>\n <FlexView>\n <Text\n $renderOnMobileAs=\"ab3\"\n $renderAs=\"ab3\"\n as=\"span\"\n $inline={true}\n $whiteSpace=\"normal\"\n >\n <Text $renderAs=\"ab3-bold\" as=\"span\" $inline={true}>\n New Stickers\n </Text>{' '}\n - Use them to celebrate little moments of joy!\n </Text>\n </FlexView>\n <Separator height={10} />\n <Button\n renderAs=\"secondary\"\n label=\"Got It\"\n size=\"xsmall\"\n width=\"50%\"\n onClick={endTeacherStickersOnboarding}\n />\n </FlexView>\n ),\n } as IArrowTooltipProps;\n\n setJourney(\n JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY,\n [\n {\n originalElementToHighlightRef: triggerRef,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: triggerElement,\n indicator: indicatorPayload,\n },\n ],\n undefined,\n false,\n );\n\n nextCoachmark(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY);\n }, [\n triggerRef,\n triggerElement,\n tooltipConfig.position,\n tooltipConfig.tooltipXCoOrdinates,\n tooltipConfig.tooltipYCoOrdinates,\n tooltipConfig.arrowXCoOrdinates,\n tooltipConfig.arrowYCoOrdinates,\n endTeacherStickersOnboarding,\n setJourney,\n nextCoachmark,\n ]);\n\n const stickerJourney = useMemo(\n () => ({\n startTeacherStickersJourney,\n }),\n [startTeacherStickersJourney],\n );\n\n return stickerJourney;\n};\n"],"names":["useStickersJourney","triggerRef","triggerElement","tooltipConfig","setJourney","nextCoachmark","endJourney","useJourney","endTeacherStickersOnboarding","useCallback","JOURNEY_ID_TEACHER","startTeacherStickersJourney","indicatorPayload","FlexView","jsx","jsxs","Text","Separator","Button","IndicatorType","useMemo"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAqB,CAAC;AAAA,EACjC,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AACF,MAAuC;AACrC,QAAM,EAAE,YAAAC,GAAY,eAAAC,GAAe,YAAAC,MAAeC,EAAW,GAEvDC,IAA+BC,EAAY,MAAM;AACrD,IAAAH,EAAWI,EAAmB,sBAAsB;AAAA,EAAA,GACnD,CAACJ,CAAU,CAAC,GAETK,IAA8BF,EAAY,MAAM;AAChD,QAAA,CAACR,EAAW,QAAS;AAEzB,UAAMW,IAAmB;AAAA,MACvB,UAAUT,EAAc;AAAA,MACxB,qBAAqBA,EAAc;AAAA,MACnC,qBAAqBA,EAAc;AAAA,MACnC,mBAAmBA,EAAc;AAAA,MACjC,mBAAmBA,EAAc;AAAA,MACjC,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,+BACGU,GACC,EAAA,UAAA;AAAA,QAAA,gBAAAC,EAACD,GACC,EAAA,UAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,mBAAkB;AAAA,YAClB,WAAU;AAAA,YACV,IAAG;AAAA,YACH,SAAS;AAAA,YACT,aAAY;AAAA,YAEZ,UAAA;AAAA,cAAA,gBAAAF,EAACE,KAAK,WAAU,YAAW,IAAG,QAAO,SAAS,IAAM,UAEpD,eAAA,CAAA;AAAA,cAAQ;AAAA,cAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAGhB;AAAA,QACA,gBAAAF,EAACG,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,QACvB,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,OAAM;AAAA,YACN,MAAK;AAAA,YACL,OAAM;AAAA,YACN,SAASV;AAAA,UAAA;AAAA,QACX;AAAA,MAAA,GACF;AAAA,IAAA;AAIJ,IAAAJ;AAAA,MACEM,EAAmB;AAAA,MACnB;AAAA,QACE;AAAA,UACE,+BAA+BT;AAAA,UAC/B,MAAMkB,EAAc;AAAA,UACpB,oBAAoBjB;AAAA,UACpB,WAAWU;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAGFP,EAAcK,EAAmB,sBAAsB;AAAA,EAAA,GACtD;AAAA,IACDT;AAAA,IACAC;AAAA,IACAC,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdK;AAAA,IACAJ;AAAA,IACAC;AAAA,EAAA,CACD;AASM,SAPgBe;AAAA,IACrB,OAAO;AAAA,MACL,6BAAAT;AAAA,IAAA;AAAA,IAEF,CAACA,CAA2B;AAAA,EAAA;AAIhC;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -4410,6 +4410,7 @@ declare interface IUserTypeSelectorProps {
|
|
|
4410
4410
|
|
|
4411
4411
|
declare interface IUseTeacherStickersJourneyProps {
|
|
4412
4412
|
triggerRef: RefObject<HTMLDivElement>;
|
|
4413
|
+
triggerElement: ReactElement;
|
|
4413
4414
|
tooltipConfig: TArrowTooltipConfigProps;
|
|
4414
4415
|
}
|
|
4415
4416
|
|
|
@@ -7162,7 +7163,7 @@ export declare const UserTypeSelector: NamedExoticComponent<IUserTypeSelectorPro
|
|
|
7162
7163
|
|
|
7163
7164
|
export declare const useStickers: () => IStickersContextType;
|
|
7164
7165
|
|
|
7165
|
-
export declare const useStickersJourney: ({ triggerRef, tooltipConfig, }: IUseTeacherStickersJourneyProps) => {
|
|
7166
|
+
export declare const useStickersJourney: ({ triggerRef, triggerElement, tooltipConfig, }: IUseTeacherStickersJourneyProps) => {
|
|
7166
7167
|
startTeacherStickersJourney: () => void;
|
|
7167
7168
|
};
|
|
7168
7169
|
|