@cuemath/leap 3.2.21-tp-beta-0.1 → 3.2.22-m
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/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapters-list.js +53 -68
- package/dist/features/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapters-list.js.map +1 -1
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation-styled.js +9 -0
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation-styled.js.map +1 -0
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation.js +65 -0
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation.js.map +1 -0
- package/dist/index.d.ts +25 -0
- package/dist/index.js +344 -342
- package/dist/index.js.map +1 -1
- package/dist/node_modules/@lottiefiles/dotlottie-web/dist/index.js +1881 -0
- package/dist/node_modules/@lottiefiles/dotlottie-web/dist/index.js.map +1 -0
- package/package.json +2 -1
|
@@ -1,88 +1,73 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
const { formData: u, isProcessing: i, onFormDataChange: a, isGoalCreation: n } = p, { testType: D, primaryChaptersList: o, chapterGoalCategory: G } = u, { primaryGoalCategory: I } = G || {}, d = D === "no-test", { flow: c } = k(R), { recommendedChaptersList: g, customChaptersList: s } = B(
|
|
1
|
+
import { jsx as e, jsxs as p, Fragment as G } from "react/jsx-runtime";
|
|
2
|
+
import { memo as X, useCallback as b } from "react";
|
|
3
|
+
import d from "../../../../../ui/layout/flex-view.js";
|
|
4
|
+
import k from "../../../../../ui/loader/app-loader/app-loader.js";
|
|
5
|
+
import D from "../../../../../ui/separator/separator.js";
|
|
6
|
+
import l from "../../../../../ui/text/text.js";
|
|
7
|
+
import C from "../../chapter-item/chapter-item.js";
|
|
8
|
+
import { computeRecommendedNCustomChapters as L } from "../utils.js";
|
|
9
|
+
import { ChaptersListWrapper as f } from "./chapter-selection-step-styled.js";
|
|
10
|
+
const F = X((u) => {
|
|
11
|
+
const { formData: $, isProcessing: g, onFormDataChange: m, isGoalCreation: t } = u, { testType: x, primaryChaptersList: o, chapterGoalCategory: A } = $, { primaryGoalCategory: T } = A || {}, a = x === "no-test", { recommendedChaptersList: s, customChaptersList: c } = L(
|
|
13
12
|
o,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
), h =
|
|
17
|
-
(
|
|
18
|
-
if (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} : e);
|
|
26
|
-
a({
|
|
27
|
-
primaryChaptersList: l
|
|
13
|
+
T,
|
|
14
|
+
t
|
|
15
|
+
), h = b(
|
|
16
|
+
(r) => {
|
|
17
|
+
if (t && !a) return null;
|
|
18
|
+
const n = o == null ? void 0 : o.map((i) => i.id === r ? {
|
|
19
|
+
...i,
|
|
20
|
+
added: !i.added
|
|
21
|
+
} : i);
|
|
22
|
+
m({
|
|
23
|
+
primaryChaptersList: n
|
|
28
24
|
});
|
|
29
25
|
},
|
|
30
|
-
[o,
|
|
26
|
+
[o, a, t, m]
|
|
31
27
|
);
|
|
32
|
-
return
|
|
33
|
-
|
|
28
|
+
return g ? /* @__PURE__ */ e(
|
|
29
|
+
f,
|
|
34
30
|
{
|
|
35
31
|
$gapX: 1.5,
|
|
36
32
|
$gutterX: 1.5,
|
|
37
33
|
$flexGapX: 1.25,
|
|
38
34
|
$justifyContent: "center",
|
|
39
35
|
$alignItems: "center",
|
|
40
|
-
children: /* @__PURE__ */
|
|
36
|
+
children: /* @__PURE__ */ e(k, {})
|
|
41
37
|
}
|
|
42
|
-
) : /* @__PURE__ */ f
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
|
|
38
|
+
) : /* @__PURE__ */ p(f, { $gapX: 1.5, $gutterX: 1.5, $flexGapX: 1.25, children: [
|
|
39
|
+
/* @__PURE__ */ p(d, { $flexDirection: "row", $flexGap: 4, $alignItems: "center", children: [
|
|
40
|
+
/* @__PURE__ */ e(l, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: "Recommended Chapters" }),
|
|
41
|
+
a && /* @__PURE__ */ e(l, { $renderAs: "ub2", $color: "BLACK_T_60", children: "(Click on any chapter to exclude it)" })
|
|
46
42
|
] }),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
43
|
+
/* @__PURE__ */ e(d, { $flexDirection: "row", $flexWrap: !0, $flexGapX: 1.25, children: s.length > 0 ? s.map((r, n) => /* @__PURE__ */ e(
|
|
44
|
+
C,
|
|
45
|
+
{
|
|
46
|
+
chapterData: r,
|
|
47
|
+
chapterNo: n + 1,
|
|
48
|
+
canAddChapter: !t || a,
|
|
49
|
+
onChapterItemClick: h
|
|
50
|
+
},
|
|
51
|
+
r.id
|
|
52
|
+
)) : /* @__PURE__ */ e(l, { $renderAs: "ub1", children: "No recommended chapters available" }) }),
|
|
53
|
+
!!(c != null && c.length) && /* @__PURE__ */ p(G, { children: [
|
|
54
|
+
/* @__PURE__ */ e(D, { height: 8, background: "TRANSPARENT" }),
|
|
55
|
+
/* @__PURE__ */ e(l, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: "Custom chapters" }),
|
|
56
|
+
/* @__PURE__ */ e(d, { $flexDirection: "row", $flexWrap: !0, $flexGapX: 1.25, children: c.map((r, n) => /* @__PURE__ */ e(
|
|
57
|
+
C,
|
|
51
58
|
{
|
|
52
|
-
chapterData:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
onChapterItemClick: h
|
|
59
|
+
chapterData: r,
|
|
60
|
+
canAddChapter: !t || a,
|
|
61
|
+
chapterNo: n + 1,
|
|
62
|
+
onChapterItemClick: h,
|
|
63
|
+
showChapterTags: !0
|
|
56
64
|
},
|
|
57
|
-
|
|
58
|
-
)
|
|
59
|
-
}) : /* @__PURE__ */ r(m, { $renderAs: "ub1", children: "No recommended chapters available" }) }),
|
|
60
|
-
!!(s != null && s.length) && /* @__PURE__ */ f(_, { children: [
|
|
61
|
-
/* @__PURE__ */ r(N, { height: 8, background: "TRANSPARENT" }),
|
|
62
|
-
/* @__PURE__ */ r(m, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: "Custom chapters" }),
|
|
63
|
-
/* @__PURE__ */ r(C, { $flexDirection: "row", $flexWrap: !0, $flexGapX: 1.25, children: s.map((t, l) => {
|
|
64
|
-
const e = A(
|
|
65
|
-
n,
|
|
66
|
-
d,
|
|
67
|
-
c,
|
|
68
|
-
t
|
|
69
|
-
);
|
|
70
|
-
return /* @__PURE__ */ r(
|
|
71
|
-
x,
|
|
72
|
-
{
|
|
73
|
-
chapterData: t,
|
|
74
|
-
canAddChapter: e,
|
|
75
|
-
chapterNo: l + 1,
|
|
76
|
-
onChapterItemClick: h,
|
|
77
|
-
showChapterTags: !0
|
|
78
|
-
},
|
|
79
|
-
t.id
|
|
80
|
-
);
|
|
81
|
-
}) })
|
|
65
|
+
r.id
|
|
66
|
+
)) })
|
|
82
67
|
] })
|
|
83
68
|
] });
|
|
84
69
|
});
|
|
85
70
|
export {
|
|
86
|
-
|
|
71
|
+
F as default
|
|
87
72
|
};
|
|
88
73
|
//# sourceMappingURL=chapters-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chapters-list.js","sources":["../../../../../../../src/features/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapters-list.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"chapters-list.js","sources":["../../../../../../../src/features/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapters-list.tsx"],"sourcesContent":["import type { IChaptersListProps } from './chapter-selection-step-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport AppLoader from '../../../../../ui/loader/app-loader/app-loader';\nimport Seperator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\nimport ChapterItemV2 from '../../chapter-item/chapter-item';\nimport { computeRecommendedNCustomChapters } from '../utils';\nimport * as Styled from './chapter-selection-step-styled';\n\nconst ChaptersList: FC<IChaptersListProps> = memo(props => {\n const { formData, isProcessing, onFormDataChange, isGoalCreation } = props;\n const { testType, primaryChaptersList, chapterGoalCategory } = formData;\n const { primaryGoalCategory } = chapterGoalCategory || {};\n const isSchoolSuccess = testType === 'no-test';\n\n const { recommendedChaptersList, customChaptersList } = computeRecommendedNCustomChapters(\n primaryChaptersList,\n primaryGoalCategory,\n isGoalCreation,\n );\n\n const handleChapterToggled = useCallback(\n (chapterId: string) => {\n //* If category is Test prep or Enrichment, Then one can not deselect the chapters.\n if (isGoalCreation && !isSchoolSuccess) return null;\n\n const updatedChaptersList = primaryChaptersList?.map(chapter => {\n if (chapter.id === chapterId) {\n return {\n ...chapter,\n added: !chapter.added,\n };\n }\n\n return chapter;\n });\n\n onFormDataChange({\n primaryChaptersList: updatedChaptersList,\n });\n },\n [primaryChaptersList, isSchoolSuccess, isGoalCreation, onFormDataChange],\n );\n\n if (isProcessing) {\n return (\n <Styled.ChaptersListWrapper\n $gapX={1.5}\n $gutterX={1.5}\n $flexGapX={1.25}\n $justifyContent=\"center\"\n $alignItems=\"center\"\n >\n <AppLoader />\n </Styled.ChaptersListWrapper>\n );\n }\n\n return (\n <Styled.ChaptersListWrapper $gapX={1.5} $gutterX={1.5} $flexGapX={1.25}>\n <FlexView $flexDirection=\"row\" $flexGap={4} $alignItems=\"center\">\n <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n Recommended Chapters\n </Text>\n\n {isSchoolSuccess && (\n <Text $renderAs=\"ub2\" $color=\"BLACK_T_60\">\n (Click on any chapter to exclude it)\n </Text>\n )}\n </FlexView>\n\n <FlexView $flexDirection=\"row\" $flexWrap $flexGapX={1.25}>\n {recommendedChaptersList.length > 0 ? (\n recommendedChaptersList.map((chapter, idx) => {\n return (\n <ChapterItemV2\n key={chapter.id}\n chapterData={chapter}\n chapterNo={idx + 1}\n canAddChapter={!isGoalCreation || isSchoolSuccess}\n onChapterItemClick={handleChapterToggled}\n />\n );\n })\n ) : (\n <Text $renderAs=\"ub1\">No recommended chapters available</Text>\n )}\n </FlexView>\n\n {!!customChaptersList?.length && (\n <>\n <Seperator height={8} background=\"TRANSPARENT\" />\n\n <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n Custom chapters\n </Text>\n\n <FlexView $flexDirection=\"row\" $flexWrap $flexGapX={1.25}>\n {customChaptersList.map((chapter, idx) => {\n return (\n <ChapterItemV2\n key={chapter.id}\n chapterData={chapter}\n canAddChapter={!isGoalCreation || isSchoolSuccess}\n chapterNo={idx + 1}\n onChapterItemClick={handleChapterToggled}\n showChapterTags\n />\n );\n })}\n </FlexView>\n </>\n )}\n </Styled.ChaptersListWrapper>\n );\n});\n\nexport default ChaptersList;\n"],"names":["ChaptersList","memo","props","formData","isProcessing","onFormDataChange","isGoalCreation","testType","primaryChaptersList","chapterGoalCategory","primaryGoalCategory","isSchoolSuccess","recommendedChaptersList","customChaptersList","computeRecommendedNCustomChapters","handleChapterToggled","useCallback","chapterId","updatedChaptersList","chapter","jsx","Styled.ChaptersListWrapper","AppLoader","jsxs","FlexView","Text","idx","ChapterItemV2","Fragment","Seperator"],"mappings":";;;;;;;;;AAaM,MAAAA,IAAuCC,EAAK,CAASC,MAAA;AACzD,QAAM,EAAE,UAAAC,GAAU,cAAAC,GAAc,kBAAAC,GAAkB,gBAAAC,MAAmBJ,GAC/D,EAAE,UAAAK,GAAU,qBAAAC,GAAqB,qBAAAC,EAAA,IAAwBN,GACzD,EAAE,qBAAAO,EAAA,IAAwBD,KAAuB,IACjDE,IAAkBJ,MAAa,WAE/B,EAAE,yBAAAK,GAAyB,oBAAAC,EAAA,IAAuBC;AAAA,IACtDN;AAAA,IACAE;AAAA,IACAJ;AAAA,EAAA,GAGIS,IAAuBC;AAAA,IAC3B,CAACC,MAAsB;AAEjB,UAAAX,KAAkB,CAACK,EAAwB,QAAA;AAEzC,YAAAO,IAAsBV,KAAA,gBAAAA,EAAqB,IAAI,CAAWW,MAC1DA,EAAQ,OAAOF,IACV;AAAA,QACL,GAAGE;AAAA,QACH,OAAO,CAACA,EAAQ;AAAA,MAAA,IAIbA;AAGQ,MAAAd,EAAA;AAAA,QACf,qBAAqBa;AAAA,MAAA,CACtB;AAAA,IACH;AAAA,IACA,CAACV,GAAqBG,GAAiBL,GAAgBD,CAAgB;AAAA,EAAA;AAGzE,SAAID,IAEA,gBAAAgB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,iBAAgB;AAAA,MAChB,aAAY;AAAA,MAEZ,4BAACC,GAAU,EAAA;AAAA,IAAA;AAAA,EAAA,IAMf,gBAAAC,EAACF,GAAA,EAA2B,OAAO,KAAK,UAAU,KAAK,WAAW,MAChE,UAAA;AAAA,IAAA,gBAAAE,EAACC,KAAS,gBAAe,OAAM,UAAU,GAAG,aAAY,UACtD,UAAA;AAAA,MAAA,gBAAAJ,EAACK,GAAK,EAAA,WAAU,aAAY,QAAO,cAAa,UAEhD,wBAAA;AAAA,MAECd,KACE,gBAAAS,EAAAK,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,UAE1C,wCAAA;AAAA,IAAA,GAEJ;AAAA,IAEC,gBAAAL,EAAAI,GAAA,EAAS,gBAAe,OAAM,WAAS,IAAC,WAAW,MACjD,UAAAZ,EAAwB,SAAS,IAChCA,EAAwB,IAAI,CAACO,GAASO,MAElC,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QAEC,aAAaR;AAAA,QACb,WAAWO,IAAM;AAAA,QACjB,eAAe,CAACpB,KAAkBK;AAAA,QAClC,oBAAoBI;AAAA,MAAA;AAAA,MAJfI,EAAQ;AAAA,IAAA,CAOlB,IAED,gBAAAC,EAACK,KAAK,WAAU,OAAM,8CAAiC,CAAA,GAE3D;AAAA,IAEC,CAAC,EAACZ,KAAA,QAAAA,EAAoB,WAEnB,gBAAAU,EAAAK,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAR,EAACS,GAAU,EAAA,QAAQ,GAAG,YAAW,eAAc;AAAA,wBAE9CJ,GAAK,EAAA,WAAU,aAAY,QAAO,cAAa,UAEhD,mBAAA;AAAA,MAEC,gBAAAL,EAAAI,GAAA,EAAS,gBAAe,OAAM,WAAS,IAAC,WAAW,MACjD,UAAmBX,EAAA,IAAI,CAACM,GAASO,MAE9B,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UAEC,aAAaR;AAAA,UACb,eAAe,CAACb,KAAkBK;AAAA,UAClC,WAAWe,IAAM;AAAA,UACjB,oBAAoBX;AAAA,UACpB,iBAAe;AAAA,QAAA;AAAA,QALVI,EAAQ;AAAA,MAAA,CAQlB,GACH;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import p from "styled-components";
|
|
2
|
+
const a = p.canvas`
|
|
3
|
+
${({ $renderWidth: o }) => typeof o == "number" ? `width: ${o}px;` : `width: ${o};`}
|
|
4
|
+
${({ $renderHeight: o }) => typeof o == "number" ? `height: ${o}px;` : `height: ${o};`}
|
|
5
|
+
`;
|
|
6
|
+
export {
|
|
7
|
+
a as Canvas
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=dot-lottie-animation-styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dot-lottie-animation-styled.js","sources":["../../../../src/features/ui/dot-lottie-animations/dot-lottie-animation-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Canvas = styled.canvas<{\n $renderWidth: string | number;\n $renderHeight: string | number;\n}>`\n ${({ $renderWidth }) =>\n typeof $renderWidth === 'number' ? `width: ${$renderWidth}px;` : `width: ${$renderWidth};`}\n ${({ $renderHeight }) =>\n typeof $renderHeight === 'number' ? `height: ${$renderHeight}px;` : `height: ${$renderHeight};`}\n`;\n"],"names":["Canvas","styled","$renderWidth","$renderHeight"],"mappings":";AAEO,MAAMA,IAASC,EAAO;AAAA,IAIzB,CAAC,EAAE,cAAAC,EAAa,MAChB,OAAOA,KAAiB,WAAW,UAAUA,CAAY,QAAQ,UAAUA,CAAY,GAAG;AAAA,IAC1F,CAAC,EAAE,eAAAC,EAAc,MACjB,OAAOA,KAAkB,WAAW,WAAWA,CAAa,QAAQ,WAAWA,CAAa,GAAG;AAAA;"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import { DotLottieWorker as w } from "../../../node_modules/@lottiefiles/dotlottie-web/dist/index.js";
|
|
3
|
+
import { memo as y, forwardRef as g, useRef as l, useImperativeHandle as x, useEffect as p } from "react";
|
|
4
|
+
import E from "../layout/flex-view.js";
|
|
5
|
+
import { Canvas as R } from "./dot-lottie-animation-styled.js";
|
|
6
|
+
const H = g((h, v) => {
|
|
7
|
+
const { src: s, width: i = "100%", height: a = "100%", settings: m, eventListeners: r, onRender: u } = h, c = l(null), t = l(null);
|
|
8
|
+
return x(
|
|
9
|
+
v,
|
|
10
|
+
() => ({
|
|
11
|
+
playSegments: (e) => {
|
|
12
|
+
var n, o;
|
|
13
|
+
(n = t.current) == null || n.setSegment(e[0], e[1]), (o = t.current) == null || o.play();
|
|
14
|
+
},
|
|
15
|
+
play: () => {
|
|
16
|
+
var e;
|
|
17
|
+
(e = t.current) == null || e.play();
|
|
18
|
+
},
|
|
19
|
+
pause: () => {
|
|
20
|
+
var e;
|
|
21
|
+
(e = t.current) == null || e.pause();
|
|
22
|
+
}
|
|
23
|
+
}),
|
|
24
|
+
[]
|
|
25
|
+
), p(() => {
|
|
26
|
+
c.current && (t.current = new w({
|
|
27
|
+
src: s,
|
|
28
|
+
canvas: c.current,
|
|
29
|
+
autoplay: !0,
|
|
30
|
+
loop: !1,
|
|
31
|
+
renderConfig: {
|
|
32
|
+
autoResize: !0,
|
|
33
|
+
devicePixelRatio: window.devicePixelRatio,
|
|
34
|
+
freezeOnOffscreen: !0
|
|
35
|
+
},
|
|
36
|
+
...m
|
|
37
|
+
}), u == null || u());
|
|
38
|
+
}, [s, m, u]), p(() => (r == null || r.forEach(
|
|
39
|
+
({ name: e, callback: n }) => {
|
|
40
|
+
var o;
|
|
41
|
+
return (o = t.current) == null ? void 0 : o.addEventListener(e, n);
|
|
42
|
+
}
|
|
43
|
+
), () => {
|
|
44
|
+
var e;
|
|
45
|
+
r == null || r.forEach(
|
|
46
|
+
({ name: n, callback: o }) => {
|
|
47
|
+
var f;
|
|
48
|
+
return (f = t.current) == null ? void 0 : f.removeEventListener(n, o);
|
|
49
|
+
}
|
|
50
|
+
), (e = t.current) == null || e.destroy();
|
|
51
|
+
}), [r]), /* @__PURE__ */ d(E, { $width: i, $height: a, children: /* @__PURE__ */ d(
|
|
52
|
+
R,
|
|
53
|
+
{
|
|
54
|
+
ref: c,
|
|
55
|
+
$renderWidth: i,
|
|
56
|
+
$renderHeight: a,
|
|
57
|
+
width: typeof i == "number" ? i : void 0,
|
|
58
|
+
height: typeof a == "number" ? a : void 0
|
|
59
|
+
}
|
|
60
|
+
) });
|
|
61
|
+
}), D = y(H);
|
|
62
|
+
export {
|
|
63
|
+
D as default
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=dot-lottie-animation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dot-lottie-animation.js","sources":["../../../../src/features/ui/dot-lottie-animations/dot-lottie-animation.tsx"],"sourcesContent":["import type {\n AnimationSegment,\n ILottieAnimationProps,\n ILottieAnimationRef,\n} from './dot-lottie-types';\n\nimport { DotLottieWorker } from '@lottiefiles/dotlottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport * as Styled from './dot-lottie-animation-styled';\n\nconst DotLottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n const { src, width = '100%', height = '100%', settings, eventListeners, onRender } = props;\n\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const animationInstance = useRef<DotLottieWorker | null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n playSegments: (segments: AnimationSegment) => {\n animationInstance.current?.setSegment(segments[0], segments[1]);\n animationInstance.current?.play();\n },\n play: () => {\n animationInstance.current?.play();\n },\n pause: () => {\n animationInstance.current?.pause();\n },\n }),\n [],\n );\n\n useEffect(() => {\n if (!canvasRef.current) return;\n\n animationInstance.current = new DotLottieWorker({\n src,\n canvas: canvasRef.current,\n autoplay: true,\n loop: false,\n renderConfig: {\n autoResize: true,\n devicePixelRatio: window.devicePixelRatio,\n freezeOnOffscreen: true,\n },\n ...settings,\n });\n\n onRender?.();\n }, [src, settings, onRender]);\n\n useEffect(() => {\n eventListeners?.forEach(\n ({ name, callback }) => animationInstance.current?.addEventListener(name, callback),\n );\n\n return () => {\n eventListeners?.forEach(\n ({ name, callback }) => animationInstance.current?.removeEventListener(name, callback),\n );\n animationInstance.current?.destroy();\n };\n }, [eventListeners]);\n\n const isNumW = typeof width === 'number';\n const isNumH = typeof height === 'number';\n\n return (\n <FlexView $width={width} $height={height}>\n <Styled.Canvas\n ref={canvasRef}\n $renderWidth={width}\n $renderHeight={height}\n width={isNumW ? width : undefined}\n height={isNumH ? height : undefined}\n />\n </FlexView>\n );\n});\n\nexport default memo(DotLottieAnimation);\n"],"names":["DotLottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListeners","onRender","canvasRef","useRef","animationInstance","useImperativeHandle","segments","_a","_b","useEffect","DotLottieWorker","name","callback","jsx","FlexView","Styled.Canvas","dotLottieAnimation","memo"],"mappings":";;;;;AAYA,MAAMA,IAAqBC,EAAuD,CAACC,GAAOC,MAAQ;AAC1F,QAAA,EAAE,KAAAC,GAAK,OAAAC,IAAQ,QAAQ,QAAAC,IAAS,QAAQ,UAAAC,GAAU,gBAAAC,GAAgB,UAAAC,EAAa,IAAAP,GAE/EQ,IAAYC,EAA0B,IAAI,GAC1CC,IAAoBD,EAA+B,IAAI;AAE7D,SAAAE;AAAA,IACEV;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACW,MAA+B;;AAC5C,SAAAC,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B,WAAWD,EAAS,CAAC,GAAGA,EAAS,CAAC,KAC7DE,IAAAJ,EAAkB,YAAlB,QAAAI,EAA2B;AAAA,MAC7B;AAAA,MACA,MAAM,MAAM;;AACV,SAAAD,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,MACA,OAAO,MAAM;;AACX,SAAAA,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHE,EAAU,MAAM;AACV,IAACP,EAAU,YAEGE,EAAA,UAAU,IAAIM,EAAgB;AAAA,MAC9C,KAAAd;AAAA,MACA,QAAQM,EAAU;AAAA,MAClB,UAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAc;AAAA,QACZ,YAAY;AAAA,QACZ,kBAAkB,OAAO;AAAA,QACzB,mBAAmB;AAAA,MACrB;AAAA,MACA,GAAGH;AAAA,IAAA,CACJ,GAEUE,KAAA,QAAAA;AAAA,EACV,GAAA,CAACL,GAAKG,GAAUE,CAAQ,CAAC,GAE5BQ,EAAU,OACQT,KAAA,QAAAA,EAAA;AAAA,IACd,CAAC,EAAE,MAAAW,GAAM,UAAAC,QAAe;;AAAA,cAAAL,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,iBAAiBI,GAAMC;AAAA;AAAA,KAGrE,MAAM;;AACK,IAAAZ,KAAA,QAAAA,EAAA;AAAA,MACd,CAAC,EAAE,MAAAW,GAAM,UAAAC,QAAe;;AAAA,gBAAAL,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,oBAAoBI,GAAMC;AAAA;AAAA,QAE/EL,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,EAAQ,IAEpC,CAACP,CAAc,CAAC,GAMhB,gBAAAa,EAAAC,GAAA,EAAS,QAAQjB,GAAO,SAASC,GAChC,UAAA,gBAAAe;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,cAAcL;AAAA,MACd,eAAeC;AAAA,MACf,OATS,OAAOD,KAAU,WASVA,IAAQ;AAAA,MACxB,QATS,OAAOC,KAAW,WASVA,IAAS;AAAA,IAAA;AAAA,EAE9B,EAAA,CAAA;AAEJ,CAAC,GAEckB,IAAAC,EAAKzB,CAAkB;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,10 +2,13 @@ import type { ButtonHTMLAttributes } from 'react';
|
|
|
2
2
|
import type { Channel } from '@cuemath/cue-message-broker';
|
|
3
3
|
import { ChannelStatus } from '@cuemath/cue-message-broker';
|
|
4
4
|
import { ComponentType } from 'react';
|
|
5
|
+
import type { Config } from '@lottiefiles/dotlottie-web';
|
|
5
6
|
import { Context } from 'react';
|
|
6
7
|
import type { DefaultTheme } from 'styled-components';
|
|
7
8
|
import { DetailedHTMLProps } from 'react';
|
|
8
9
|
import type { Dispatch } from 'react';
|
|
10
|
+
import type { EventListener as EventListener_2 } from '@lottiefiles/dotlottie-web';
|
|
11
|
+
import type { EventType } from '@lottiefiles/dotlottie-web';
|
|
9
12
|
import { FC } from 'react';
|
|
10
13
|
import type { FormEvent } from 'react';
|
|
11
14
|
import { ForwardRefExoticComponent } from 'react';
|
|
@@ -74,6 +77,8 @@ export declare const AnimatedArc: React_2.FC<IAnimatedArcProps>;
|
|
|
74
77
|
|
|
75
78
|
export declare const AnimatedAvatarMessage: NamedExoticComponent<IAnimatedAvatarMessageProps>;
|
|
76
79
|
|
|
80
|
+
declare type AnimationSegment = [number, number];
|
|
81
|
+
|
|
77
82
|
export declare const AppLoader: FC<IAppLoaderProps>;
|
|
78
83
|
|
|
79
84
|
export declare const ArcButton: NamedExoticComponent<IArcButtonProps & {
|
|
@@ -363,6 +368,8 @@ export declare const DesmosCalculator: FC<IDesmosCalculatorProps>;
|
|
|
363
368
|
|
|
364
369
|
export declare const DigitalMeter: FC<IDigitalMeterProps>;
|
|
365
370
|
|
|
371
|
+
export declare const DotLottieAnimation: NamedExoticComponent<ILottieAnimationProps & RefAttributes<ILottieAnimationRef>>;
|
|
372
|
+
|
|
366
373
|
export declare const DownIcon: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
367
374
|
|
|
368
375
|
export declare const DraftIcon: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
@@ -2216,6 +2223,22 @@ declare interface ILogger {
|
|
|
2216
2223
|
(eventName: string, data?: Record<string, unknown>): void;
|
|
2217
2224
|
}
|
|
2218
2225
|
|
|
2226
|
+
declare interface ILottieAnimationProps {
|
|
2227
|
+
src: string;
|
|
2228
|
+
width?: string | number;
|
|
2229
|
+
height?: string | number;
|
|
2230
|
+
settings?: Partial<LottieSettings>;
|
|
2231
|
+
eventListeners?: {
|
|
2232
|
+
name: EventType;
|
|
2233
|
+
callback: EventListener_2<EventType>;
|
|
2234
|
+
}[];
|
|
2235
|
+
onRender?: () => void;
|
|
2236
|
+
}
|
|
2237
|
+
|
|
2238
|
+
declare interface ILottieAnimationRef {
|
|
2239
|
+
playSegments: (segments: AnimationSegment, forceFlag?: boolean) => void;
|
|
2240
|
+
}
|
|
2241
|
+
|
|
2219
2242
|
declare interface ILPARChapterProps extends ILPARSheetCallbacks {
|
|
2220
2243
|
userType: TUserTypes;
|
|
2221
2244
|
chapterData: TLPARChapterData;
|
|
@@ -4508,6 +4531,8 @@ export declare const LOTTIE: {
|
|
|
4508
4531
|
VIDEO: string;
|
|
4509
4532
|
};
|
|
4510
4533
|
|
|
4534
|
+
declare type LottieSettings = Omit<Config, 'src' | 'canvas'>;
|
|
4535
|
+
|
|
4511
4536
|
export declare const LPARChapter: FC<ILPARChapterProps>;
|
|
4512
4537
|
|
|
4513
4538
|
export declare const LPARMilestoneChapter: FC<ILPARMilestoneChapter>;
|