@cuemath/leap 3.2.15-link.0 → 3.2.15-link.1
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,62 +1,62 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
const
|
|
8
|
-
const [l,
|
|
9
|
-
|
|
10
|
-
}, [
|
|
1
|
+
import { jsxs as k, jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import { memo as C, useState as $, useMemo as b, useCallback as m, useEffect as x } from "react";
|
|
3
|
+
import H from "../layout/flex-view.js";
|
|
4
|
+
import R from "../separator/separator.js";
|
|
5
|
+
import V from "../text/text.js";
|
|
6
|
+
import w from "./accordion-items/accordion-items.js";
|
|
7
|
+
const y = C((S) => {
|
|
8
|
+
const { theme: p = "light", visibleBuffer: i, accordionData: c, defaultOpenElement: v = -1 } = S, [l, g] = $(i), [o, E] = $(v), r = b(() => [], []), s = b(() => [], []), T = p === "dark", A = m(() => {
|
|
9
|
+
g((e) => e < c.length ? c.length : i);
|
|
10
|
+
}, [c.length, i]), n = m((e, t) => {
|
|
11
11
|
e instanceof HTMLDivElement ? e.style.maxHeight = t ? `${e.scrollHeight}px` : "0px" : e instanceof SVGSVGElement && (e.style.transform = t ? "rotateZ(45deg)" : "rotateZ(0deg)");
|
|
12
|
-
}, []),
|
|
12
|
+
}, []), D = m(
|
|
13
13
|
(e) => {
|
|
14
|
-
const t =
|
|
14
|
+
const t = r[e], h = s[e];
|
|
15
15
|
if (!t || !h) return;
|
|
16
|
-
const
|
|
16
|
+
const a = o === e, L = a ? -1 : e;
|
|
17
17
|
if (o !== -1 && o !== e) {
|
|
18
|
-
const
|
|
19
|
-
|
|
18
|
+
const u = r[o], d = s[o];
|
|
19
|
+
u && d && (n(u, !1), n(d, !1));
|
|
20
20
|
}
|
|
21
|
-
n(t, !
|
|
21
|
+
n(t, !a), n(h, !a), E(L);
|
|
22
22
|
},
|
|
23
|
-
[
|
|
23
|
+
[r, s, o, n]
|
|
24
24
|
);
|
|
25
|
-
return
|
|
26
|
-
|
|
27
|
-
}, [
|
|
28
|
-
o !== -1 &&
|
|
29
|
-
}, [l, o,
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
return x(() => {
|
|
26
|
+
g(i);
|
|
27
|
+
}, [i]), x(() => {
|
|
28
|
+
o !== -1 && r[o] && s[o] && (n(r[o], !0), n(s[o], !0));
|
|
29
|
+
}, [l, o, r, s, n]), /* @__PURE__ */ k(H, { $flexDirection: "column", children: [
|
|
30
|
+
c.map((e, t) => /* @__PURE__ */ f(
|
|
31
|
+
w,
|
|
32
32
|
{
|
|
33
33
|
item: e,
|
|
34
34
|
index: t,
|
|
35
|
-
handleToggle:
|
|
36
|
-
refList:
|
|
37
|
-
iconRef:
|
|
35
|
+
handleToggle: D,
|
|
36
|
+
refList: r,
|
|
37
|
+
iconRef: s,
|
|
38
38
|
visible: t < l,
|
|
39
|
-
theme:
|
|
39
|
+
theme: p
|
|
40
40
|
},
|
|
41
41
|
`${e.accordionQuestion}-${t}`
|
|
42
42
|
)),
|
|
43
|
-
/* @__PURE__ */ f(
|
|
43
|
+
/* @__PURE__ */ f(R, { height: 24 }),
|
|
44
44
|
/* @__PURE__ */ f(
|
|
45
|
-
|
|
45
|
+
V,
|
|
46
46
|
{
|
|
47
47
|
$renderAs: "ub3-bold",
|
|
48
48
|
$align: "center",
|
|
49
49
|
$textDecoration: "underline",
|
|
50
50
|
$marginBottom: 24,
|
|
51
|
-
onClick:
|
|
52
|
-
$color:
|
|
51
|
+
onClick: A,
|
|
52
|
+
$color: T ? "WHITE" : "BLACK",
|
|
53
53
|
$cursor: "pointer",
|
|
54
|
-
children: l <
|
|
54
|
+
children: l < c.length ? "See More" : "See Less"
|
|
55
55
|
}
|
|
56
56
|
)
|
|
57
57
|
] });
|
|
58
|
-
}),
|
|
58
|
+
}), Z = y;
|
|
59
59
|
export {
|
|
60
|
-
|
|
60
|
+
Z as default
|
|
61
61
|
};
|
|
62
62
|
//# sourceMappingURL=accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sources":["../../../../src/features/ui/accordion/accordion.tsx"],"sourcesContent":["import type { AccordionProps } from './accordion-types';\n\nimport { useCallback, useEffect, useMemo, useState, memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport Separator from '../separator/separator';\nimport Text from '../text/text';\nimport AccordionItem from './accordion-items/accordion-items';\n\nconst Accordion = memo<AccordionProps>(
|
|
1
|
+
{"version":3,"file":"accordion.js","sources":["../../../../src/features/ui/accordion/accordion.tsx"],"sourcesContent":["import type { AccordionProps } from './accordion-types';\n\nimport { useCallback, useEffect, useMemo, useState, memo } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport Separator from '../separator/separator';\nimport Text from '../text/text';\nimport AccordionItem from './accordion-items/accordion-items';\n\nconst Accordion = memo<AccordionProps>(props => {\n const { theme = 'light', visibleBuffer, accordionData, defaultOpenElement = -1 } = props;\n const [visible, setVisible] = useState(visibleBuffer);\n const [openIndex, setOpenIndex] = useState<number>(defaultOpenElement);\n const refList = useMemo<(HTMLDivElement | null)[]>(() => [], []);\n const iconRef = useMemo<(SVGSVGElement | null)[]>(() => [], []);\n const isDarkTheme = theme === 'dark';\n\n const handleShowToggle = useCallback(() => {\n setVisible(prev => (prev < accordionData.length ? accordionData.length : visibleBuffer));\n }, [accordionData.length, visibleBuffer]);\n\n const animateElement = useCallback((element: HTMLElement | SVGElement, isOpen: boolean) => {\n if (element instanceof HTMLDivElement) {\n element.style.maxHeight = isOpen ? `${element.scrollHeight}px` : '0px';\n } else if (element instanceof SVGSVGElement) {\n element.style.transform = isOpen ? 'rotateZ(45deg)' : 'rotateZ(0deg)';\n }\n }, []);\n\n const handleToggle = useCallback(\n (currentIndex: number) => {\n const currentRefList = refList[currentIndex];\n const currentIconRef = iconRef[currentIndex];\n\n if (!currentRefList || !currentIconRef) return;\n\n const isCurrentlyOpen = openIndex === currentIndex;\n const newOpenIndex = isCurrentlyOpen ? -1 : currentIndex;\n\n // Close previously open item\n if (openIndex !== -1 && openIndex !== currentIndex) {\n const prevRef = refList[openIndex];\n const prevIcon = iconRef[openIndex];\n\n if (prevRef && prevIcon) {\n animateElement(prevRef, false);\n animateElement(prevIcon, false);\n }\n }\n\n // Toggle current item\n animateElement(currentRefList, !isCurrentlyOpen);\n animateElement(currentIconRef, !isCurrentlyOpen);\n\n setOpenIndex(newOpenIndex);\n },\n [refList, iconRef, openIndex, animateElement],\n );\n\n useEffect(() => {\n setVisible(visibleBuffer);\n }, [visibleBuffer]);\n\n useEffect(() => {\n if (openIndex !== -1 && refList[openIndex] && iconRef[openIndex]) {\n animateElement(refList[openIndex]!, true);\n animateElement(iconRef[openIndex]!, true);\n }\n }, [visible, openIndex, refList, iconRef, animateElement]);\n\n return (\n <FlexView $flexDirection=\"column\">\n {accordionData.map((item, index) => (\n <AccordionItem\n key={`${item.accordionQuestion}-${index}`}\n item={item}\n index={index}\n handleToggle={handleToggle}\n refList={refList}\n iconRef={iconRef}\n visible={index < visible}\n theme={theme}\n />\n ))}\n <Separator height={24} />\n <Text\n $renderAs=\"ub3-bold\"\n $align=\"center\"\n $textDecoration=\"underline\"\n $marginBottom={24}\n onClick={handleShowToggle}\n $color={isDarkTheme ? 'WHITE' : 'BLACK'}\n $cursor=\"pointer\"\n >\n {visible < accordionData.length ? 'See More' : 'See Less'}\n </Text>\n </FlexView>\n );\n});\n\nexport default Accordion;\n"],"names":["Accordion","memo","props","theme","visibleBuffer","accordionData","defaultOpenElement","visible","setVisible","useState","openIndex","setOpenIndex","refList","useMemo","iconRef","isDarkTheme","handleShowToggle","useCallback","prev","animateElement","element","isOpen","handleToggle","currentIndex","currentRefList","currentIconRef","isCurrentlyOpen","newOpenIndex","prevRef","prevIcon","useEffect","jsxs","FlexView","item","index","jsx","AccordionItem","Separator","Text","Accordion$1"],"mappings":";;;;;;AASA,MAAMA,IAAYC,EAAqB,CAASC,MAAA;AAC9C,QAAM,EAAE,OAAAC,IAAQ,SAAS,eAAAC,GAAe,eAAAC,GAAe,oBAAAC,IAAqB,GAAO,IAAAJ,GAC7E,CAACK,GAASC,CAAU,IAAIC,EAASL,CAAa,GAC9C,CAACM,GAAWC,CAAY,IAAIF,EAAiBH,CAAkB,GAC/DM,IAAUC,EAAmC,MAAM,CAAC,GAAG,CAAE,CAAA,GACzDC,IAAUD,EAAkC,MAAM,CAAC,GAAG,CAAE,CAAA,GACxDE,IAAcZ,MAAU,QAExBa,IAAmBC,EAAY,MAAM;AACzC,IAAAT,EAAW,OAASU,IAAOb,EAAc,SAASA,EAAc,SAASD,CAAc;AAAA,EACtF,GAAA,CAACC,EAAc,QAAQD,CAAa,CAAC,GAElCe,IAAiBF,EAAY,CAACG,GAAmCC,MAAoB;AACzF,IAAID,aAAmB,iBACrBA,EAAQ,MAAM,YAAYC,IAAS,GAAGD,EAAQ,YAAY,OAAO,QACxDA,aAAmB,kBACpBA,EAAA,MAAM,YAAYC,IAAS,mBAAmB;AAAA,EAE1D,GAAG,CAAE,CAAA,GAECC,IAAeL;AAAA,IACnB,CAACM,MAAyB;AAClB,YAAAC,IAAiBZ,EAAQW,CAAY,GACrCE,IAAiBX,EAAQS,CAAY;AAEvC,UAAA,CAACC,KAAkB,CAACC,EAAgB;AAExC,YAAMC,IAAkBhB,MAAca,GAChCI,IAAeD,IAAkB,KAAKH;AAGxC,UAAAb,MAAc,MAAMA,MAAca,GAAc;AAC5C,cAAAK,IAAUhB,EAAQF,CAAS,GAC3BmB,IAAWf,EAAQJ,CAAS;AAElC,QAAIkB,KAAWC,MACbV,EAAeS,GAAS,EAAK,GAC7BT,EAAeU,GAAU,EAAK;AAAA,MAElC;AAGe,MAAAV,EAAAK,GAAgB,CAACE,CAAe,GAChCP,EAAAM,GAAgB,CAACC,CAAe,GAE/Cf,EAAagB,CAAY;AAAA,IAC3B;AAAA,IACA,CAACf,GAASE,GAASJ,GAAWS,CAAc;AAAA,EAAA;AAG9C,SAAAW,EAAU,MAAM;AACd,IAAAtB,EAAWJ,CAAa;AAAA,EAAA,GACvB,CAACA,CAAa,CAAC,GAElB0B,EAAU,MAAM;AACd,IAAIpB,MAAc,MAAME,EAAQF,CAAS,KAAKI,EAAQJ,CAAS,MAC9CS,EAAAP,EAAQF,CAAS,GAAI,EAAI,GACzBS,EAAAL,EAAQJ,CAAS,GAAI,EAAI;AAAA,EAC1C,GACC,CAACH,GAASG,GAAWE,GAASE,GAASK,CAAc,CAAC,GAGvD,gBAAAY,EAACC,GAAS,EAAA,gBAAe,UACtB,UAAA;AAAA,IAAc3B,EAAA,IAAI,CAAC4B,GAAMC,MACxB,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,MAAAH;AAAA,QACA,OAAAC;AAAA,QACA,cAAAZ;AAAA,QACA,SAAAV;AAAA,QACA,SAAAE;AAAA,QACA,SAASoB,IAAQ3B;AAAA,QACjB,OAAAJ;AAAA,MAAA;AAAA,MAPK,GAAG8B,EAAK,iBAAiB,IAAIC,CAAK;AAAA,IAAA,CAS1C;AAAA,IACD,gBAAAC,EAACE,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,IACvB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,QAAO;AAAA,QACP,iBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,SAAStB;AAAA,QACT,QAAQD,IAAc,UAAU;AAAA,QAChC,SAAQ;AAAA,QAEP,UAAAR,IAAUF,EAAc,SAAS,aAAa;AAAA,MAAA;AAAA,IACjD;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC,GAEDkC,IAAevC;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export declare const Accordion: NamedExoticComponent<AccordionProps>;
|
|
|
38
38
|
declare interface AccordionProps {
|
|
39
39
|
theme?: AccordionTheme;
|
|
40
40
|
visibleBuffer: number;
|
|
41
|
+
defaultOpenElement?: number;
|
|
41
42
|
accordionData: Array<{
|
|
42
43
|
accordionQuestion: string;
|
|
43
44
|
accordionAnswer: React.ReactNode | string;
|