@cuemath/leap 3.0.12-as3 → 3.0.12-as4
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/chapters/chapters-list/chapter-item/chapter-item-styled.js +20 -22
- package/dist/features/chapters/chapters-list/chapter-item/chapter-item-styled.js.map +1 -1
- package/dist/features/chapters/chapters-list/chapter-item/chapter-item.js +21 -11
- package/dist/features/chapters/chapters-list/chapter-item/chapter-item.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e, { keyframes as l, css as d } from "styled-components";
|
|
2
2
|
import o from "../../../ui/layout/flex-view.js";
|
|
3
3
|
import h from "../../../ui/text/text.js";
|
|
4
4
|
const g = l`
|
|
@@ -11,9 +11,9 @@ const g = l`
|
|
|
11
11
|
transform: translate(-150%, 100%) skewX(45deg);
|
|
12
12
|
opacity: 1;
|
|
13
13
|
}
|
|
14
|
-
`, u =
|
|
14
|
+
`, u = e(o)`
|
|
15
15
|
transition: scale 0.3s ease-in-out;
|
|
16
|
-
`, b =
|
|
16
|
+
`, b = e(o)`
|
|
17
17
|
position: absolute;
|
|
18
18
|
width: 100%;
|
|
19
19
|
height: 100%;
|
|
@@ -40,66 +40,64 @@ const g = l`
|
|
|
40
40
|
transform: translate(100%, -100%) skew(45deg);
|
|
41
41
|
pointer-events: none;
|
|
42
42
|
}
|
|
43
|
-
`, w =
|
|
43
|
+
`, w = e.svg(({ theme: t }) => `
|
|
44
44
|
position: absolute;
|
|
45
45
|
z-index: ${t.zIndex.CHAPTER_PROGRESS_SVG};
|
|
46
46
|
inset: 50%;
|
|
47
47
|
transform: translate(-50%, -50%) rotate(-90deg);
|
|
48
|
-
`), $ =
|
|
49
|
-
({ theme: t, $progressCircle:
|
|
50
|
-
const { GREY_2: i, BLACK: p } = t.colors, { gutter: a } = t.layout, n = a * 18.625, c =
|
|
48
|
+
`), $ = e.circle(
|
|
49
|
+
({ theme: t, $progressCircle: r, $progress: s }) => {
|
|
50
|
+
const { GREY_2: i, BLACK: p } = t.colors, { gutter: a } = t.layout, n = a * 18.625, c = r ? n - s : s;
|
|
51
51
|
return `
|
|
52
52
|
stroke-dasharray: ${n};
|
|
53
53
|
stroke-dashoffset: ${c};
|
|
54
|
-
stroke: ${
|
|
54
|
+
stroke: ${r ? p : i};
|
|
55
55
|
|
|
56
56
|
stroke-width: ${a * 0.125}px;
|
|
57
57
|
fill: none;
|
|
58
58
|
`;
|
|
59
59
|
}
|
|
60
|
-
), y =
|
|
61
|
-
const { gutter:
|
|
60
|
+
), y = e.img(({ theme: t }) => {
|
|
61
|
+
const { gutter: r } = t.layout;
|
|
62
62
|
return `
|
|
63
63
|
display: block;
|
|
64
|
-
width: ${
|
|
65
|
-
height: ${
|
|
64
|
+
width: ${r * 6}px;
|
|
65
|
+
height: ${r * 6}px;
|
|
66
66
|
border-radius: 50%;
|
|
67
67
|
`;
|
|
68
|
-
}), C =
|
|
69
|
-
const { layout:
|
|
68
|
+
}), C = e.div(({ theme: t }) => {
|
|
69
|
+
const { layout: r } = t;
|
|
70
70
|
return `
|
|
71
71
|
position: absolute;
|
|
72
72
|
top: 5px;
|
|
73
73
|
right: 5px;
|
|
74
74
|
z-index: 2;
|
|
75
75
|
|
|
76
|
-
width: ${
|
|
77
|
-
height: ${
|
|
76
|
+
width: ${r.gutter * 1.25}px;
|
|
77
|
+
height: ${r.gutter * 1.25}px;
|
|
78
78
|
border-radius: 50%;
|
|
79
79
|
background: ${t.colors.WHITE_1};
|
|
80
80
|
outline: 1px solid ${t.colors.BLACK_1};
|
|
81
81
|
`;
|
|
82
|
-
}), v =
|
|
82
|
+
}), v = e(h)`
|
|
83
83
|
display: -webkit-box;
|
|
84
84
|
-webkit-box-orient: vertical;
|
|
85
85
|
-webkit-line-clamp: 2;
|
|
86
86
|
text-overflow: ellipsis;
|
|
87
87
|
overflow: hidden;
|
|
88
88
|
height: 44px;
|
|
89
|
-
`, x =
|
|
90
|
-
justify-content: center;
|
|
91
|
-
align-items: center;
|
|
89
|
+
`, x = e(o)`
|
|
92
90
|
position: absolute;
|
|
93
91
|
left: 0;
|
|
94
92
|
top: 0;
|
|
95
|
-
`, I =
|
|
93
|
+
`, I = e(o)`
|
|
96
94
|
cursor: ${({ shouldHideClick: t }) => t ? "not-allowed" : "pointer"};
|
|
97
95
|
position: relative;
|
|
98
96
|
box-shadow: inset 0px 0px 0px 0.5px ${({ theme: t }) => t.colors.BLACK_T_15};
|
|
99
97
|
aspect-ratio: 1;
|
|
100
98
|
|
|
101
99
|
&:hover {
|
|
102
|
-
background: ${({ theme: t, $bgColor:
|
|
100
|
+
background: ${({ theme: t, $bgColor: r }) => r ? t.colors[r] : "none"};
|
|
103
101
|
|
|
104
102
|
${u} {
|
|
105
103
|
scale: 1.05;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chapter-item-styled.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../ui/types';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst shimmerEffect = keyframes`\n 0% {\n transform: translate(100%, -100%) skewX(45deg);\n opacity: 0;\n }\n\n 100% {\n transform: translate(-150%, 100%) skewX(45deg);\n opacity: 1;\n }\n`;\n\nconst ChapterImageWrapper = styled(FlexView)`\n transition: scale 0.3s ease-in-out;\n`;\n\nconst ChapterProgressWrapper = styled(FlexView)`\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n overflow: hidden;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n width: 40%;\n height: 150%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0.7) 0%,\n rgba(255, 255, 255, 0.1) 35%,\n rgba(255, 255, 255, 0.7) 40%,\n rgba(255, 255, 255, 0.7) 80%,\n rgba(255, 255, 255, 0) 100%\n );\n opacity: 0;\n transform: translate(100%, -100%) skew(45deg);\n pointer-events: none;\n }\n`;\n\nconst ChapterProgressSVG = styled.svg(({ theme }) => {\n return `\n position: absolute;\n z-index: ${theme.zIndex.CHAPTER_PROGRESS_SVG};\n inset: 50%;\n transform: translate(-50%, -50%) rotate(-90deg);\n `;\n});\n\ninterface IChapterProgressSVGCircleProps {\n $progressCircle?: boolean;\n $progress: number;\n}\n\nconst ChapterProgressSVGCircle = styled.circle<IChapterProgressSVGCircleProps>(\n ({ theme, $progressCircle, $progress }) => {\n const { GREY_2, BLACK } = theme.colors;\n const { gutter } = theme.layout;\n\n const strokeDashArray = gutter * 18.625;\n const strokeDashOffset = $progressCircle ? strokeDashArray - $progress : $progress;\n\n return `\n stroke-dasharray: ${strokeDashArray};\n stroke-dashoffset: ${strokeDashOffset};\n stroke: ${$progressCircle ? BLACK : GREY_2};\n\n stroke-width: ${gutter * 0.125}px;\n fill: none;\n `;\n },\n);\n\nconst ChapterImage = styled.img(({ theme }) => {\n const { gutter } = theme.layout;\n\n return `\n display: block;\n width: ${gutter * 6}px;\n height: ${gutter * 6}px;\n border-radius: 50%;\n `;\n});\n\nconst StyledCheckIconWrapper = styled.div(({ theme }) => {\n const { layout } = theme;\n\n return `\n position: absolute;\n top: 5px;\n right: 5px;\n z-index: 2;\n\n width: ${layout.gutter * 1.25}px;\n height: ${layout.gutter * 1.25}px;\n border-radius: 50%;\n background: ${theme.colors.WHITE_1};\n outline: 1px solid ${theme.colors.BLACK_1};\n `;\n});\n\nconst ChapterName = styled(Text)`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n height: 44px;\n`;\n\ninterface IChapterItemWrapperProps {\n $bgColor?: TColorNames;\n shouldHideClick?: boolean;\n}\n\nconst ChapterItemNumberWrapper = styled(FlexView)`\n
|
|
1
|
+
{"version":3,"file":"chapter-item-styled.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../ui/types';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst shimmerEffect = keyframes`\n 0% {\n transform: translate(100%, -100%) skewX(45deg);\n opacity: 0;\n }\n\n 100% {\n transform: translate(-150%, 100%) skewX(45deg);\n opacity: 1;\n }\n`;\n\nconst ChapterImageWrapper = styled(FlexView)`\n transition: scale 0.3s ease-in-out;\n`;\n\nconst ChapterProgressWrapper = styled(FlexView)`\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n overflow: hidden;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n width: 40%;\n height: 150%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0.7) 0%,\n rgba(255, 255, 255, 0.1) 35%,\n rgba(255, 255, 255, 0.7) 40%,\n rgba(255, 255, 255, 0.7) 80%,\n rgba(255, 255, 255, 0) 100%\n );\n opacity: 0;\n transform: translate(100%, -100%) skew(45deg);\n pointer-events: none;\n }\n`;\n\nconst ChapterProgressSVG = styled.svg(({ theme }) => {\n return `\n position: absolute;\n z-index: ${theme.zIndex.CHAPTER_PROGRESS_SVG};\n inset: 50%;\n transform: translate(-50%, -50%) rotate(-90deg);\n `;\n});\n\ninterface IChapterProgressSVGCircleProps {\n $progressCircle?: boolean;\n $progress: number;\n}\n\nconst ChapterProgressSVGCircle = styled.circle<IChapterProgressSVGCircleProps>(\n ({ theme, $progressCircle, $progress }) => {\n const { GREY_2, BLACK } = theme.colors;\n const { gutter } = theme.layout;\n\n const strokeDashArray = gutter * 18.625;\n const strokeDashOffset = $progressCircle ? strokeDashArray - $progress : $progress;\n\n return `\n stroke-dasharray: ${strokeDashArray};\n stroke-dashoffset: ${strokeDashOffset};\n stroke: ${$progressCircle ? BLACK : GREY_2};\n\n stroke-width: ${gutter * 0.125}px;\n fill: none;\n `;\n },\n);\n\nconst ChapterImage = styled.img(({ theme }) => {\n const { gutter } = theme.layout;\n\n return `\n display: block;\n width: ${gutter * 6}px;\n height: ${gutter * 6}px;\n border-radius: 50%;\n `;\n});\n\nconst StyledCheckIconWrapper = styled.div(({ theme }) => {\n const { layout } = theme;\n\n return `\n position: absolute;\n top: 5px;\n right: 5px;\n z-index: 2;\n\n width: ${layout.gutter * 1.25}px;\n height: ${layout.gutter * 1.25}px;\n border-radius: 50%;\n background: ${theme.colors.WHITE_1};\n outline: 1px solid ${theme.colors.BLACK_1};\n `;\n});\n\nconst ChapterName = styled(Text)`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n height: 44px;\n`;\n\ninterface IChapterItemWrapperProps {\n $bgColor?: TColorNames;\n shouldHideClick?: boolean;\n}\n\nconst ChapterItemNumberWrapper = styled(FlexView)`\n position: absolute;\n left: 0;\n top: 0;\n`;\n\nconst ChapterItemWrapper = styled(FlexView)<IChapterItemWrapperProps>`\n cursor: ${({ shouldHideClick }) => (shouldHideClick ? 'not-allowed' : 'pointer')};\n position: relative;\n box-shadow: inset 0px 0px 0px 0.5px ${({ theme }) => theme.colors.BLACK_T_15};\n aspect-ratio: 1;\n\n &:hover {\n background: ${({ theme, $bgColor }) => ($bgColor ? theme.colors[$bgColor] : 'none')};\n\n ${ChapterImageWrapper} {\n scale: 1.05;\n }\n\n ${ChapterProgressWrapper}::after {\n ${css`\n animation: ${shimmerEffect} 1.2s ease-out forwards;\n `}\n }\n\n ${ChapterItemNumberWrapper} {\n background-color: transparent;\n }\n }\n`;\n\nexport {\n ChapterImageWrapper,\n ChapterProgressWrapper,\n ChapterImage,\n ChapterItemWrapper,\n ChapterName,\n ChapterProgressSVG,\n ChapterProgressSVGCircle,\n StyledCheckIconWrapper,\n ChapterItemNumberWrapper,\n};\n"],"names":["shimmerEffect","keyframes","ChapterImageWrapper","styled","FlexView","ChapterProgressWrapper","ChapterProgressSVG","theme","ChapterProgressSVGCircle","$progressCircle","$progress","GREY_2","BLACK","gutter","strokeDashArray","strokeDashOffset","ChapterImage","StyledCheckIconWrapper","layout","ChapterName","Text","ChapterItemNumberWrapper","ChapterItemWrapper","shouldHideClick","$bgColor","css"],"mappings":";;;AAOA,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhBC,IAAsBC,EAAOC,CAAQ;AAAA;AAAA,GAIrCC,IAAyBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6BxCE,IAAqBH,EAAO,IAAI,CAAC,EAAE,OAAAI,QAChC;AAAA;AAAA,eAEMA,EAAM,OAAO,oBAAoB;AAAA;AAAA;AAAA,GAI/C,GAOKC,IAA2BL,EAAO;AAAA,EACtC,CAAC,EAAE,OAAAI,GAAO,iBAAAE,GAAiB,WAAAC,QAAgB;AACzC,UAAM,EAAE,QAAAC,GAAQ,OAAAC,MAAUL,EAAM,QAC1B,EAAE,QAAAM,EAAO,IAAIN,EAAM,QAEnBO,IAAkBD,IAAS,QAC3BE,IAAmBN,IAAkBK,IAAkBJ,IAAYA;AAElE,WAAA;AAAA,0BACeI,CAAe;AAAA,2BACdC,CAAgB;AAAA,gBAC3BN,IAAkBG,IAAQD,CAAM;AAAA;AAAA,sBAE1BE,IAAS,KAAK;AAAA;AAAA;AAAA,EAGlC;AACF,GAEMG,IAAeb,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AACvC,QAAA,EAAE,QAAAM,EAAO,IAAIN,EAAM;AAElB,SAAA;AAAA;AAAA,aAEIM,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEKI,IAAyBd,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AACjD,QAAA,EAAE,QAAAW,EAAW,IAAAX;AAEZ,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMIW,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA,kBAEhBX,EAAM,OAAO,OAAO;AAAA,yBACbA,EAAM,OAAO,OAAO;AAAA;AAE7C,CAAC,GAEKY,IAAchB,EAAOiB,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAczBC,IAA2BlB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM1CkB,IAAqBnB,EAAOC,CAAQ;AAAA,YAC9B,CAAC,EAAE,iBAAAmB,EAAA,MAAuBA,IAAkB,gBAAgB,SAAU;AAAA;AAAA,wCAE1C,CAAC,EAAE,OAAAhB,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,kBAI5D,CAAC,EAAE,OAAAA,GAAO,UAAAiB,QAAgBA,IAAWjB,EAAM,OAAOiB,CAAQ,IAAI,MAAO;AAAA;AAAA,MAEjFtB,CAAmB;AAAA;AAAA;AAAA;AAAA,MAInBG,CAAsB;AAAA,QACpBoB;AAAA,qBACazB,CAAa;AAAA,OAC3B;AAAA;AAAA;AAAA,MAGDqB,CAAwB;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import { jsx as e, jsxs as n } from "react/jsx-runtime";
|
|
2
|
-
import { memo as
|
|
2
|
+
import { memo as w, useState as W, useRef as _, useCallback as k, useLayoutEffect as A } from "react";
|
|
3
3
|
import S from "../../../../assets/line-icons/icons/check2.js";
|
|
4
4
|
import m from "../../../ui/arrow-tooltip/arrow-tooltip.js";
|
|
5
5
|
import H from "../../../ui/layout/flex-view.js";
|
|
6
|
-
import
|
|
7
|
-
import { ChapterItemWrapper as
|
|
8
|
-
const U =
|
|
6
|
+
import j from "../../../ui/text/text.js";
|
|
7
|
+
import { ChapterItemWrapper as P, ChapterImageWrapper as X, ChapterProgressWrapper as E, ChapterProgressSVG as G, ChapterProgressSVGCircle as d, ChapterImage as L, StyledCheckIconWrapper as N, ChapterName as V, ChapterItemNumberWrapper as z } from "./chapter-item-styled.js";
|
|
8
|
+
const U = w(
|
|
9
9
|
({ milestoneId: o, chapter: i, onChapterClick: a, itemIndex: l, shouldShowItemIndex: g }) => {
|
|
10
10
|
const {
|
|
11
11
|
name: c,
|
|
12
12
|
image_url: $,
|
|
13
13
|
progress_stat: u,
|
|
14
14
|
image_hue: C
|
|
15
|
-
} = i, { mandatory: f, optional: I } = u || {}, { completed: s = 0, total: p = 0 } = f || {}, { total: x = 0 } = I || {}, [
|
|
15
|
+
} = i, { mandatory: f, optional: I } = u || {}, { completed: s = 0, total: p = 0 } = f || {}, { total: x = 0 } = I || {}, [y, T] = W(!1), t = _(null), h = s > 0 ? Math.floor((s / p || 1) * 100) : 0, r = p + x, b = k(() => {
|
|
16
16
|
if (r === 0)
|
|
17
17
|
return null;
|
|
18
18
|
a(i, o);
|
|
19
19
|
}, [i, o, a, r]);
|
|
20
20
|
return A(() => {
|
|
21
|
-
t.current && t.current.scrollHeight > t.current.clientHeight &&
|
|
21
|
+
t.current && t.current.scrollHeight > t.current.clientHeight && T(!0);
|
|
22
22
|
}, [t]), /* @__PURE__ */ e(
|
|
23
23
|
m,
|
|
24
24
|
{
|
|
@@ -29,7 +29,7 @@ const U = y(
|
|
|
29
29
|
parentWidth: "100%",
|
|
30
30
|
zIndex: 5,
|
|
31
31
|
children: /* @__PURE__ */ n(
|
|
32
|
-
|
|
32
|
+
P,
|
|
33
33
|
{
|
|
34
34
|
id: `milestone-chapter-${o || ""}-${l}`,
|
|
35
35
|
$alignItems: "center",
|
|
@@ -37,13 +37,13 @@ const U = y(
|
|
|
37
37
|
$gutterX: 1,
|
|
38
38
|
$flexGap: 8,
|
|
39
39
|
$background: "WHITE_1",
|
|
40
|
-
onClick:
|
|
40
|
+
onClick: b,
|
|
41
41
|
className: "goal-widget-chapter-item",
|
|
42
42
|
$bgColor: `${C}_1`,
|
|
43
43
|
shouldHideClick: r === 0,
|
|
44
44
|
children: [
|
|
45
45
|
/* @__PURE__ */ n(
|
|
46
|
-
|
|
46
|
+
X,
|
|
47
47
|
{
|
|
48
48
|
$width: "fit-content",
|
|
49
49
|
$position: "relative",
|
|
@@ -74,7 +74,7 @@ const U = y(
|
|
|
74
74
|
renderAs: "primary",
|
|
75
75
|
position: "bottom",
|
|
76
76
|
tooltipItem: c,
|
|
77
|
-
hidden: !
|
|
77
|
+
hidden: !y,
|
|
78
78
|
widthX: 21.75,
|
|
79
79
|
zIndex: 5,
|
|
80
80
|
children: /* @__PURE__ */ e(
|
|
@@ -89,7 +89,17 @@ const U = y(
|
|
|
89
89
|
)
|
|
90
90
|
}
|
|
91
91
|
) }),
|
|
92
|
-
!!g && /* @__PURE__ */ e(
|
|
92
|
+
!!g && /* @__PURE__ */ e(
|
|
93
|
+
z,
|
|
94
|
+
{
|
|
95
|
+
$background: "WHITE_4",
|
|
96
|
+
$widthX: 1.75,
|
|
97
|
+
$heightX: 1.75,
|
|
98
|
+
$alignItems: "center",
|
|
99
|
+
$justifyContent: "center",
|
|
100
|
+
children: /* @__PURE__ */ e(j, { $renderAs: "ab2", $color: "BLACK_1", $align: "center", children: l + 1 })
|
|
101
|
+
}
|
|
102
|
+
)
|
|
93
103
|
]
|
|
94
104
|
}
|
|
95
105
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chapter-item.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item.tsx"],"sourcesContent":["import type { IChapterItemProps } from './chapter-item-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useLayoutEffect, useRef, useState, memo } from 'react';\n\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './chapter-item-styled';\n\nconst ChapterItem: FC<IChapterItemProps> = memo(\n ({ milestoneId, chapter, onChapterClick, itemIndex, shouldShowItemIndex }) => {\n const {\n name,\n image_url: imageUrl,\n progress_stat: chapterProgressStat,\n image_hue: imageHue,\n } = chapter;\n const { mandatory, optional } = chapterProgressStat || {};\n const { completed = 0, total: totalMandatory = 0 } = mandatory || {};\n const { total: optionalTotal = 0 } = optional || {};\n const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n const titleTextRef = useRef<HTMLDivElement>(null);\n const completionPercentage =\n completed > 0 ? Math.floor((completed / totalMandatory || 1) * 100) : 0;\n const totalSheets = totalMandatory + optionalTotal;\n const handleOnChapterClick = useCallback(() => {\n if (totalSheets === 0) {\n return null;\n }\n\n onChapterClick(chapter, milestoneId);\n }, [chapter, milestoneId, onChapterClick, totalSheets]);\n\n useLayoutEffect(() => {\n if (\n titleTextRef.current &&\n titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n ) {\n setShowTitleTooltip(true);\n }\n }, [titleTextRef]);\n\n return (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem=\"Coming soon! We’re building this chapter\"\n hidden={totalSheets > 0}\n parentWidth=\"100%\"\n zIndex={5}\n >\n <Styled.ChapterItemWrapper\n id={`milestone-chapter-${milestoneId || ''}-${itemIndex}`}\n $alignItems=\"center\"\n $gapX={1}\n $gutterX={1}\n $flexGap={8}\n $background=\"WHITE_1\"\n onClick={handleOnChapterClick}\n className=\"goal-widget-chapter-item\"\n $bgColor={`${imageHue}_1`}\n shouldHideClick={totalSheets === 0}\n >\n <Styled.ChapterImageWrapper\n $width=\"fit-content\"\n $position=\"relative\"\n $justifyContent=\"center\"\n $alignItems=\"center\"\n >\n <Styled.ChapterProgressWrapper>\n <Styled.ChapterProgressSVG width=\"96px\" height=\"96px\">\n <Styled.ChapterProgressSVGCircle $progress={0} r=\"47\" cx=\"48\" cy=\"48\" />\n <Styled.ChapterProgressSVGCircle\n $progressCircle\n $progress={completionPercentage * 2.98}\n r=\"47\"\n cx=\"48\"\n cy=\"48\"\n />\n </Styled.ChapterProgressSVG>\n </Styled.ChapterProgressWrapper>\n\n <Styled.ChapterImage src={imageUrl} alt=\"Chapter Image\" />\n\n {completionPercentage === 100 && (\n <Styled.StyledCheckIconWrapper>\n <Check2Icon width={20} height={20} />\n </Styled.StyledCheckIconWrapper>\n )}\n </Styled.ChapterImageWrapper>\n\n <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={name}\n hidden={!showTitleTooltip}\n widthX={21.75}\n zIndex={5}\n >\n <Styled.ChapterName\n ref={titleTextRef}\n $renderAs=\"ab2\"\n $color=\"BLACK_T_87\"\n $align=\"center\"\n >\n {name}\n </Styled.ChapterName>\n </ArrowTooltip>\n </FlexView>\n {!!shouldShowItemIndex && (\n <Styled.ChapterItemNumberWrapper
|
|
1
|
+
{"version":3,"file":"chapter-item.js","sources":["../../../../../src/features/chapters/chapters-list/chapter-item/chapter-item.tsx"],"sourcesContent":["import type { IChapterItemProps } from './chapter-item-types';\nimport type { FC } from 'react';\n\nimport { useCallback, useLayoutEffect, useRef, useState, memo } from 'react';\n\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './chapter-item-styled';\n\nconst ChapterItem: FC<IChapterItemProps> = memo(\n ({ milestoneId, chapter, onChapterClick, itemIndex, shouldShowItemIndex }) => {\n const {\n name,\n image_url: imageUrl,\n progress_stat: chapterProgressStat,\n image_hue: imageHue,\n } = chapter;\n const { mandatory, optional } = chapterProgressStat || {};\n const { completed = 0, total: totalMandatory = 0 } = mandatory || {};\n const { total: optionalTotal = 0 } = optional || {};\n const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n const titleTextRef = useRef<HTMLDivElement>(null);\n const completionPercentage =\n completed > 0 ? Math.floor((completed / totalMandatory || 1) * 100) : 0;\n const totalSheets = totalMandatory + optionalTotal;\n const handleOnChapterClick = useCallback(() => {\n if (totalSheets === 0) {\n return null;\n }\n\n onChapterClick(chapter, milestoneId);\n }, [chapter, milestoneId, onChapterClick, totalSheets]);\n\n useLayoutEffect(() => {\n if (\n titleTextRef.current &&\n titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n ) {\n setShowTitleTooltip(true);\n }\n }, [titleTextRef]);\n\n return (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem=\"Coming soon! We’re building this chapter\"\n hidden={totalSheets > 0}\n parentWidth=\"100%\"\n zIndex={5}\n >\n <Styled.ChapterItemWrapper\n id={`milestone-chapter-${milestoneId || ''}-${itemIndex}`}\n $alignItems=\"center\"\n $gapX={1}\n $gutterX={1}\n $flexGap={8}\n $background=\"WHITE_1\"\n onClick={handleOnChapterClick}\n className=\"goal-widget-chapter-item\"\n $bgColor={`${imageHue}_1`}\n shouldHideClick={totalSheets === 0}\n >\n <Styled.ChapterImageWrapper\n $width=\"fit-content\"\n $position=\"relative\"\n $justifyContent=\"center\"\n $alignItems=\"center\"\n >\n <Styled.ChapterProgressWrapper>\n <Styled.ChapterProgressSVG width=\"96px\" height=\"96px\">\n <Styled.ChapterProgressSVGCircle $progress={0} r=\"47\" cx=\"48\" cy=\"48\" />\n <Styled.ChapterProgressSVGCircle\n $progressCircle\n $progress={completionPercentage * 2.98}\n r=\"47\"\n cx=\"48\"\n cy=\"48\"\n />\n </Styled.ChapterProgressSVG>\n </Styled.ChapterProgressWrapper>\n\n <Styled.ChapterImage src={imageUrl} alt=\"Chapter Image\" />\n\n {completionPercentage === 100 && (\n <Styled.StyledCheckIconWrapper>\n <Check2Icon width={20} height={20} />\n </Styled.StyledCheckIconWrapper>\n )}\n </Styled.ChapterImageWrapper>\n\n <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={name}\n hidden={!showTitleTooltip}\n widthX={21.75}\n zIndex={5}\n >\n <Styled.ChapterName\n ref={titleTextRef}\n $renderAs=\"ab2\"\n $color=\"BLACK_T_87\"\n $align=\"center\"\n >\n {name}\n </Styled.ChapterName>\n </ArrowTooltip>\n </FlexView>\n {!!shouldShowItemIndex && (\n <Styled.ChapterItemNumberWrapper\n $background=\"WHITE_4\"\n $widthX={1.75}\n $heightX={1.75}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <Text $renderAs=\"ab2\" $color=\"BLACK_1\" $align=\"center\">\n {itemIndex + 1}\n </Text>\n </Styled.ChapterItemNumberWrapper>\n )}\n </Styled.ChapterItemWrapper>\n </ArrowTooltip>\n );\n },\n);\n\nexport default ChapterItem;\n"],"names":["ChapterItem","memo","milestoneId","chapter","onChapterClick","itemIndex","shouldShowItemIndex","name","imageUrl","chapterProgressStat","imageHue","mandatory","optional","completed","totalMandatory","optionalTotal","showTitleTooltip","setShowTitleTooltip","useState","titleTextRef","useRef","completionPercentage","totalSheets","handleOnChapterClick","useCallback","useLayoutEffect","jsx","ArrowTooltip","jsxs","Styled.ChapterItemWrapper","Styled.ChapterImageWrapper","Styled.ChapterProgressWrapper","Styled.ChapterProgressSVG","Styled.ChapterProgressSVGCircle","Styled.ChapterImage","Styled.StyledCheckIconWrapper","Check2Icon","FlexView","Styled.ChapterName","Styled.ChapterItemNumberWrapper","Text"],"mappings":"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"}
|