@cuemath/leap 2.9.12-j1 → 2.9.12-j2
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/auth/signup/user-type-selector/user-type-card/user-type-card.js +12 -11
- package/dist/features/auth/signup/user-type-selector/user-type-card/user-type-card.js.map +1 -1
- package/dist/features/post-game-stats/digital-meter/constants.js +11 -11
- package/dist/features/post-game-stats/digital-meter/constants.js.map +1 -1
- package/dist/features/ui/animated-arc/animated-arc-constants.js +3 -2
- package/dist/features/ui/animated-arc/animated-arc-constants.js.map +1 -1
- package/dist/features/ui/animated-arc/animated-arc-styled.js +7 -7
- package/dist/features/ui/animated-arc/animated-arc-styled.js.map +1 -1
- package/dist/features/ui/animated-arc/animated-arc.js +7 -7
- package/dist/features/ui/animated-arc/animated-arc.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as o, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as i, useMemo as l } from "react";
|
|
3
3
|
import { LOTTIE as e } from "../../../../../assets/lottie/lottie.js";
|
|
4
4
|
import A from "../../../../ui/layout/flex-view.js";
|
|
@@ -7,15 +7,16 @@ import h from "../../../../ui/separator/separator.js";
|
|
|
7
7
|
import T from "../../../../ui/text/text.js";
|
|
8
8
|
import { CardWrapper as g, SelectedAnimationWrapper as u } from "./user-type-card-styled.js";
|
|
9
9
|
const m = {
|
|
10
|
+
renderer: "canvas",
|
|
10
11
|
autoplay: !0,
|
|
11
12
|
loop: !1
|
|
12
|
-
}, I = ({ onClick: s, userType:
|
|
13
|
-
const p = i(null),
|
|
13
|
+
}, I = ({ onClick: s, userType: n, isSelected: t }) => {
|
|
14
|
+
const p = i(null), c = i(null), f = l(
|
|
14
15
|
() => ({ ...m, loop: t, autoplay: t }),
|
|
15
16
|
[t]
|
|
16
17
|
);
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */
|
|
18
|
+
return /* @__PURE__ */ o(A, { $alignItems: "center", $justifyContent: "center", children: [
|
|
19
|
+
/* @__PURE__ */ o(
|
|
19
20
|
g,
|
|
20
21
|
{
|
|
21
22
|
$widthX: 11,
|
|
@@ -31,10 +32,10 @@ const m = {
|
|
|
31
32
|
/* @__PURE__ */ r(
|
|
32
33
|
a,
|
|
33
34
|
{
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
36
|
-
src:
|
|
37
|
-
settings:
|
|
35
|
+
width: 352,
|
|
36
|
+
height: 352,
|
|
37
|
+
src: n === "parent" ? e.PARENT_AVATAR : e.STUDENT_AVATAR,
|
|
38
|
+
settings: f,
|
|
38
39
|
ref: p
|
|
39
40
|
}
|
|
40
41
|
),
|
|
@@ -45,14 +46,14 @@ const m = {
|
|
|
45
46
|
height: 176,
|
|
46
47
|
src: e.AVATAR_SELECTED,
|
|
47
48
|
settings: m,
|
|
48
|
-
ref:
|
|
49
|
+
ref: c
|
|
49
50
|
}
|
|
50
51
|
) })
|
|
51
52
|
]
|
|
52
53
|
}
|
|
53
54
|
),
|
|
54
55
|
/* @__PURE__ */ r(h, { heightX: 1 }),
|
|
55
|
-
/* @__PURE__ */ r(T, { $renderAs: "ac3", $color: t ? "WHITE" : "WHITE_T_60", children:
|
|
56
|
+
/* @__PURE__ */ r(T, { $renderAs: "ac3", $color: t ? "WHITE" : "WHITE_T_60", children: n })
|
|
56
57
|
] });
|
|
57
58
|
};
|
|
58
59
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user-type-card.js","sources":["../../../../../../src/features/auth/signup/user-type-selector/user-type-card/user-type-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { IUserTypeCardProps } from './user-type-card-types';\n\nimport { useMemo, useRef, type FC } from 'react';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './user-type-card-styled';\n\nconst animationSettings = {\n autoplay: true,\n loop: false,\n};\n\nconst UserTypeCard: FC<IUserTypeCardProps> = ({ onClick, userType, isSelected }) => {\n const userTypeAnimationRef = useRef<ILottieAnimationRef | null>(null);\n const selectedAnimationRef = useRef<ILottieAnimationRef | null>(null);\n\n const avatarSettings = useMemo(\n () => ({ ...animationSettings, loop: isSelected, autoplay: isSelected }),\n [isSelected],\n );\n\n return (\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <Styled.CardWrapper\n $widthX={11}\n $heightX={11}\n $gutterX={2.375}\n $gapX={2.375}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $selected={isSelected}\n $background=\"BLACK_3\"\n onClick={onClick}\n >\n <LottieAnimation\n width={
|
|
1
|
+
{"version":3,"file":"user-type-card.js","sources":["../../../../../../src/features/auth/signup/user-type-selector/user-type-card/user-type-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { IUserTypeCardProps } from './user-type-card-types';\n\nimport { useMemo, useRef, type FC } from 'react';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport * as Styled from './user-type-card-styled';\n\nconst animationSettings = {\n renderer: 'canvas',\n autoplay: true,\n loop: false,\n};\n\nconst UserTypeCard: FC<IUserTypeCardProps> = ({ onClick, userType, isSelected }) => {\n const userTypeAnimationRef = useRef<ILottieAnimationRef | null>(null);\n const selectedAnimationRef = useRef<ILottieAnimationRef | null>(null);\n\n const avatarSettings = useMemo(\n () => ({ ...animationSettings, loop: isSelected, autoplay: isSelected }),\n [isSelected],\n );\n\n return (\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <Styled.CardWrapper\n $widthX={11}\n $heightX={11}\n $gutterX={2.375}\n $gapX={2.375}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $selected={isSelected}\n $background=\"BLACK_3\"\n onClick={onClick}\n >\n <LottieAnimation\n width={352}\n height={352}\n src={userType === 'parent' ? LOTTIE.PARENT_AVATAR : LOTTIE.STUDENT_AVATAR}\n settings={avatarSettings}\n ref={userTypeAnimationRef}\n />\n {isSelected && (\n <Styled.SelectedAnimationWrapper>\n <LottieAnimation\n width={176}\n height={176}\n src={LOTTIE.AVATAR_SELECTED}\n settings={animationSettings}\n ref={selectedAnimationRef}\n />\n </Styled.SelectedAnimationWrapper>\n )}\n </Styled.CardWrapper>\n <Separator heightX={1} />\n <Text $renderAs=\"ac3\" $color={isSelected ? 'WHITE' : 'WHITE_T_60'}>\n {userType}\n </Text>\n </FlexView>\n );\n};\n\nexport default UserTypeCard;\n"],"names":["animationSettings","UserTypeCard","onClick","userType","isSelected","userTypeAnimationRef","useRef","selectedAnimationRef","avatarSettings","useMemo","jsxs","FlexView","Styled.CardWrapper","jsx","LottieAnimation","LOTTIE","Styled.SelectedAnimationWrapper","Separator","Text"],"mappings":";;;;;;;;AAYA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AACR,GAEMC,IAAuC,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,YAAAC,QAAiB;AAC5E,QAAAC,IAAuBC,EAAmC,IAAI,GAC9DC,IAAuBD,EAAmC,IAAI,GAE9DE,IAAiBC;AAAA,IACrB,OAAO,EAAE,GAAGT,GAAmB,MAAMI,GAAY,UAAUA;IAC3D,CAACA,CAAU;AAAA,EAAA;AAGb,SACG,gBAAAM,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,WAAWR;AAAA,QACX,aAAY;AAAA,QACZ,SAAAF;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKX,MAAa,WAAWY,EAAO,gBAAgBA,EAAO;AAAA,cAC3D,UAAUP;AAAA,cACV,KAAKH;AAAA,YAAA;AAAA,UACP;AAAA,UACCD,KACC,gBAAAS,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKC,EAAO;AAAA,cACZ,UAAUf;AAAA,cACV,KAAKO;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,gBAAAM,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAJ,EAACK,KAAK,WAAU,OAAM,QAAQd,IAAa,UAAU,cAClD,UACHD,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { GAME_LAUNCHER_SIZE as
|
|
2
|
-
|
|
1
|
+
import { GAME_LAUNCHER_SIZE as A, GAME_LAUNCHER_SIZE_LARGE as _ } from "../../circle-games/game-launcher/comps/card-container/constants.js";
|
|
2
|
+
import { ANIMATED_ARC_Z_INDEX as E } from "../../ui/animated-arc/animated-arc-constants.js";
|
|
3
|
+
const L = 300, R = 2, t = 150, I = E + 1, N = I + 1, O = N + 1, D = A === _ ? 16 : 12, c = (A - R) / 2, n = 3.8, s = 2 / 30, C = 2.37, G = 12 / 30, S = 20 / 30, M = 43 / 30;
|
|
3
4
|
export {
|
|
4
|
-
|
|
5
|
+
t as ANIMATED_ARC_START_ANGLE,
|
|
5
6
|
c as ARC_RADIUS,
|
|
6
|
-
R as ARC_Z_INDEX,
|
|
7
7
|
N as CONTENT_CONTAINER_Z_INDEX,
|
|
8
8
|
I as LINE_MARKING_Z_INDEX,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
O as NUMBER_MARKING_Z_INDEX,
|
|
10
|
+
G as PROGRESS_FILL_DELAY,
|
|
11
|
+
S as PROGRESS_FILL_DURATION,
|
|
12
|
+
M as RAINBOW_COLOR_ANIMATION_DURATION,
|
|
13
|
+
D as STROKE_WIDTH,
|
|
14
|
+
C as TARGET_ACHIEVED_DELAY,
|
|
15
15
|
s as TARGET_HELPER_TEXT_APPEAR_DELAY,
|
|
16
16
|
n as TOTAL_ANIMATION_DURATION,
|
|
17
|
-
|
|
17
|
+
L as TOTAL_ARC_AVAILABLE
|
|
18
18
|
};
|
|
19
19
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nconst BORDER_OFFSET = 2;\n\n//Animated Arc\nexport const ANIMATED_ARC_START_ANGLE = 150;\
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/features/post-game-stats/digital-meter/constants.ts"],"sourcesContent":["import {\n GAME_LAUNCHER_SIZE,\n GAME_LAUNCHER_SIZE_LARGE,\n} from '../../circle-games/game-launcher/comps/card-container/constants';\nimport { ANIMATED_ARC_Z_INDEX } from '../../ui/animated-arc/animated-arc-constants';\n\nexport const TOTAL_ARC_AVAILABLE = 300;\n\nconst BORDER_OFFSET = 2;\n\n//Animated Arc\nexport const ANIMATED_ARC_START_ANGLE = 150;\n\nexport const LINE_MARKING_Z_INDEX = ANIMATED_ARC_Z_INDEX + 1;\nexport const CONTENT_CONTAINER_Z_INDEX = LINE_MARKING_Z_INDEX + 1;\nexport const NUMBER_MARKING_Z_INDEX = CONTENT_CONTAINER_Z_INDEX + 1;\nexport const STROKE_WIDTH = GAME_LAUNCHER_SIZE === GAME_LAUNCHER_SIZE_LARGE ? 16 : 12;\nexport const ARC_RADIUS = (GAME_LAUNCHER_SIZE - BORDER_OFFSET) / 2;\n\n// animation details\nexport const TOTAL_ANIMATION_DURATION = 3.8; // in sec\nexport const TARGET_HELPER_TEXT_APPEAR_DELAY = 2 / 30; // delay of 2 frames\nexport const TARGET_ACHIEVED_DELAY = 2.37; // delay of 3 sec\nexport const PROGRESS_FILL_DELAY = 12 / 30; // delay of 12 frames\nexport const PROGRESS_FILL_DURATION = 20 / 30; // in 20 frames\nexport const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["TOTAL_ARC_AVAILABLE","BORDER_OFFSET","ANIMATED_ARC_START_ANGLE","LINE_MARKING_Z_INDEX","ANIMATED_ARC_Z_INDEX","CONTENT_CONTAINER_Z_INDEX","NUMBER_MARKING_Z_INDEX","STROKE_WIDTH","GAME_LAUNCHER_SIZE","GAME_LAUNCHER_SIZE_LARGE","ARC_RADIUS","TOTAL_ANIMATION_DURATION","TARGET_HELPER_TEXT_APPEAR_DELAY","TARGET_ACHIEVED_DELAY","PROGRESS_FILL_DELAY","PROGRESS_FILL_DURATION","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;AAMO,MAAMA,IAAsB,KAE7BC,IAAgB,GAGTC,IAA2B,KAE3BC,IAAuBC,IAAuB,GAC9CC,IAA4BF,IAAuB,GACnDG,IAAyBD,IAA4B,GACrDE,IAAeC,MAAuBC,IAA2B,KAAK,IACtEC,KAAcF,IAAqBP,KAAiB,GAGpDU,IAA2B,KAC3BC,IAAkC,IAAI,IACtCC,IAAwB,MACxBC,IAAsB,KAAK,IAC3BC,IAAyB,KAAK,IAC9BC,IAAmC,KAAK;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-arc-constants.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-constants.ts"],"sourcesContent":["export const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\n"],"names":["RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":"AAAO,MAAMA,IAAmC;"}
|
|
1
|
+
{"version":3,"file":"animated-arc-constants.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-constants.ts"],"sourcesContent":["export const RAINBOW_COLOR_ANIMATION_DURATION = 43 / 30; // 43 frames;\nexport const ANIMATED_ARC_Z_INDEX = 1;\n"],"names":["RAINBOW_COLOR_ANIMATION_DURATION","ANIMATED_ARC_Z_INDEX"],"mappings":"AAAO,MAAMA,IAAmC,oBACnCC,IAAuB;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import r, { keyframes as e } from "styled-components";
|
|
2
|
-
import {
|
|
3
|
-
const
|
|
2
|
+
import { ANIMATED_ARC_Z_INDEX as n, RAINBOW_COLOR_ANIMATION_DURATION as s } from "./animated-arc-constants.js";
|
|
3
|
+
const F = e`
|
|
4
4
|
0% {
|
|
5
5
|
stroke: #FFB700;
|
|
6
6
|
color: #FFB700;
|
|
@@ -17,17 +17,17 @@ const s = e`
|
|
|
17
17
|
stroke: #33CCFF;
|
|
18
18
|
color: #33CCFF;
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
20
|
+
`, C = r.svg`
|
|
21
21
|
position: absolute;
|
|
22
|
-
z-index:
|
|
22
|
+
z-index: ${n};
|
|
23
23
|
pointer-events: none;
|
|
24
24
|
`, c = r.path`
|
|
25
25
|
stroke: ${({ theme: o, stroke: t }) => o.colors[t]};
|
|
26
|
-
animation: ${({ $showAnimatedRainbowArc: o }) => o ?
|
|
27
|
-
${
|
|
26
|
+
animation: ${({ $showAnimatedRainbowArc: o }) => o ? F : "undefined"}
|
|
27
|
+
${s}s ease infinite forwards;
|
|
28
28
|
`;
|
|
29
29
|
export {
|
|
30
30
|
c as Path,
|
|
31
|
-
|
|
31
|
+
C as Svg
|
|
32
32
|
};
|
|
33
33
|
//# sourceMappingURL=animated-arc-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-arc-styled.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\n\nimport styled, { keyframes } from 'styled-components';\n\nimport { RAINBOW_COLOR_ANIMATION_DURATION } from './animated-arc-constants';\n\nconst rainbowColorAnimation = keyframes`\n 0% {\n stroke: #FFB700;\n color: #FFB700;\n }\n 33% {\n stroke: #FF884C;\n color: #FF884C;\n }\n 66% {\n stroke: #FF80F4;\n color: #FF80F4;\n }\n 100% {\n stroke: #33CCFF;\n color: #33CCFF;\n }\n`;\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index:
|
|
1
|
+
{"version":3,"file":"animated-arc-styled.js","sources":["../../../../src/features/ui/animated-arc/animated-arc-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\n\nimport styled, { keyframes } from 'styled-components';\n\nimport { ANIMATED_ARC_Z_INDEX, RAINBOW_COLOR_ANIMATION_DURATION } from './animated-arc-constants';\n\nconst rainbowColorAnimation = keyframes`\n 0% {\n stroke: #FFB700;\n color: #FFB700;\n }\n 33% {\n stroke: #FF884C;\n color: #FF884C;\n }\n 66% {\n stroke: #FF80F4;\n color: #FF80F4;\n }\n 100% {\n stroke: #33CCFF;\n color: #33CCFF;\n }\n`;\n\nexport const Svg = styled.svg`\n position: absolute;\n z-index: ${ANIMATED_ARC_Z_INDEX};\n pointer-events: none;\n`;\n\nexport const Path = styled.path<{ stroke: TColorNames; $showAnimatedRainbowArc: boolean }>`\n stroke: ${({ theme, stroke }) => theme.colors[stroke]};\n animation: ${({ $showAnimatedRainbowArc }) =>\n $showAnimatedRainbowArc ? rainbowColorAnimation : 'undefined'}\n ${RAINBOW_COLOR_ANIMATION_DURATION}s ease infinite forwards;\n`;\n"],"names":["rainbowColorAnimation","keyframes","Svg","styled","ANIMATED_ARC_Z_INDEX","Path","theme","stroke","$showAnimatedRainbowArc","RAINBOW_COLOR_ANIMATION_DURATION"],"mappings":";;AAMA,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBjBC,IAAMC,EAAO;AAAA;AAAA,aAEbC,CAAoB;AAAA;AAAA,GAIpBC,IAAOF,EAAO;AAAA,YACf,CAAC,EAAE,OAAAG,GAAO,QAAAC,EAAA,MAAaD,EAAM,OAAOC,CAAM,CAAC;AAAA,eACxC,CAAC,EAAE,yBAAAC,EAAA,MACZA,IAA0BR,IAAwB,WAAW;AAAA,MAC7DS,CAAgC;AAAA;"}
|
|
@@ -8,8 +8,8 @@ const b = ({
|
|
|
8
8
|
color: y,
|
|
9
9
|
targetAngle: a,
|
|
10
10
|
startAngle: c = 0,
|
|
11
|
-
duration:
|
|
12
|
-
mode:
|
|
11
|
+
duration: s = 2,
|
|
12
|
+
mode: o = "draw",
|
|
13
13
|
delay: n = 0,
|
|
14
14
|
showAnimatedRainbowArc: $ = !1
|
|
15
15
|
}) => {
|
|
@@ -20,17 +20,17 @@ const b = ({
|
|
|
20
20
|
return g(() => {
|
|
21
21
|
const t = f.current;
|
|
22
22
|
if (t) {
|
|
23
|
-
if (
|
|
23
|
+
if (o === "draw") {
|
|
24
24
|
const m = t.getTotalLength();
|
|
25
25
|
t.style.strokeDasharray = `${m}`, t.style.strokeDashoffset = `${m}`, t.getBoundingClientRect(), requestAnimationFrame(() => {
|
|
26
|
-
t.style.transition = `stroke-dashoffset ${
|
|
26
|
+
t.style.transition = `stroke-dashoffset ${s}s linear ${n}s`, t.style.strokeDashoffset = "0";
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
|
|
30
|
-
t.style.transition = `opacity ${
|
|
29
|
+
o === "fade" && (t.style.opacity = "0", t.getBoundingClientRect(), requestAnimationFrame(() => {
|
|
30
|
+
t.style.transition = `opacity ${s}s ease-in-out ${n}s`, t.style.opacity = "1";
|
|
31
31
|
}));
|
|
32
32
|
}
|
|
33
|
-
}, [h,
|
|
33
|
+
}, [h, o, s, n]), /* @__PURE__ */ p(R, { width: 2 * e, height: 2 * e, viewBox: `0 0 ${2 * e} ${2 * e}`, children: /* @__PURE__ */ p(
|
|
34
34
|
k,
|
|
35
35
|
{
|
|
36
36
|
ref: f,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n showAnimatedRainbowArc = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity ${duration} ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $showAnimatedRainbowArc={showAnimatedRainbowArc}\n />\n </Styled.Svg>\n );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,
|
|
1
|
+
{"version":3,"file":"animated-arc.js","sources":["../../../../src/features/ui/animated-arc/animated-arc.tsx"],"sourcesContent":["import type { IAnimatedArcProps } from './animated-arc-types';\n\nimport React, { useRef, useLayoutEffect, useMemo } from 'react';\n\nimport { describeArc } from './animated-arc-helpers';\nimport * as Styled from './animated-arc-styled';\n\nconst AnimatedArc: React.FC<IAnimatedArcProps> = ({\n radius,\n strokeWidth,\n color,\n targetAngle,\n startAngle = 0,\n duration = 2,\n mode = 'draw',\n delay = 0,\n showAnimatedRainbowArc = false,\n}) => {\n const pathRef = useRef<SVGPathElement>(null);\n\n const center = radius;\n const arcRadius = radius - strokeWidth / 2; // draw arc inside the visible bounds\n const arcPath = useMemo(\n () => describeArc(center, center, arcRadius, startAngle, targetAngle),\n [targetAngle, startAngle, arcRadius, center],\n );\n\n useLayoutEffect(() => {\n const path = pathRef.current;\n\n if (!path) return;\n\n if (mode === 'draw') {\n const length = path.getTotalLength();\n\n path.style.strokeDasharray = `${length}`;\n path.style.strokeDashoffset = `${length}`;\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `stroke-dashoffset ${duration}s linear ${delay}s`;\n path.style.strokeDashoffset = '0';\n });\n }\n\n if (mode === 'fade') {\n path.style.opacity = '0';\n path.getBoundingClientRect();\n\n requestAnimationFrame(() => {\n path.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;\n path.style.opacity = '1';\n });\n }\n }, [arcPath, mode, duration, delay]);\n\n return (\n <Styled.Svg width={2 * radius} height={2 * radius} viewBox={`0 0 ${2 * radius} ${2 * radius}`}>\n <Styled.Path\n ref={pathRef}\n d={arcPath}\n fill=\"none\"\n stroke={color}\n strokeWidth={strokeWidth}\n strokeLinecap=\"butt\"\n $showAnimatedRainbowArc={showAnimatedRainbowArc}\n />\n </Styled.Svg>\n );\n};\n\nexport default AnimatedArc;\n"],"names":["AnimatedArc","radius","strokeWidth","color","targetAngle","startAngle","duration","mode","delay","showAnimatedRainbowArc","pathRef","useRef","center","arcRadius","arcPath","useMemo","describeArc","useLayoutEffect","path","length","Styled.Svg","jsx","Styled.Path","AnimatedArc$1"],"mappings":";;;;AAOA,MAAMA,IAA2C,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,wBAAAC,IAAyB;AAC3B,MAAM;AACE,QAAAC,IAAUC,EAAuB,IAAI,GAErCC,IAASX,GACTY,IAAYZ,IAASC,IAAc,GACnCY,IAAUC;AAAA,IACd,MAAMC,EAAYJ,GAAQA,GAAQC,GAAWR,GAAYD,CAAW;AAAA,IACpE,CAACA,GAAaC,GAAYQ,GAAWD,CAAM;AAAA,EAAA;AAG7C,SAAAK,EAAgB,MAAM;AACpB,UAAMC,IAAOR,EAAQ;AAErB,QAAKQ,GAEL;AAAA,UAAIX,MAAS,QAAQ;AACb,cAAAY,IAASD,EAAK;AAEf,QAAAA,EAAA,MAAM,kBAAkB,GAAGC,CAAM,IACjCD,EAAA,MAAM,mBAAmB,GAAGC,CAAM,IACvCD,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,UAAAA,EAAK,MAAM,aAAa,qBAAqBZ,CAAQ,YAAYE,CAAK,KACtEU,EAAK,MAAM,mBAAmB;AAAA,QAAA,CAC/B;AAAA,MACH;AAEA,MAAIX,MAAS,WACXW,EAAK,MAAM,UAAU,KACrBA,EAAK,sBAAsB,GAE3B,sBAAsB,MAAM;AAC1B,QAAAA,EAAK,MAAM,aAAa,WAAWZ,CAAQ,iBAAiBE,CAAK,KACjEU,EAAK,MAAM,UAAU;AAAA,MAAA,CACtB;AAAA;AAAA,KAEF,CAACJ,GAASP,GAAMD,GAAUE,CAAK,CAAC,qBAGhCY,GAAA,EAAW,OAAO,IAAInB,GAAQ,QAAQ,IAAIA,GAAQ,SAAS,OAAO,IAAIA,CAAM,IAAI,IAAIA,CAAM,IACzF,UAAA,gBAAAoB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAKZ;AAAA,MACL,GAAGI;AAAA,MACH,MAAK;AAAA,MACL,QAAQX;AAAA,MACR,aAAAD;AAAA,MACA,eAAc;AAAA,MACd,yBAAyBO;AAAA,IAAA;AAAA,EAE7B,EAAA,CAAA;AAEJ,GAEAc,IAAevB;"}
|