@brytdesigns/web-component-accordion 1.0.0 → 1.0.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.
|
@@ -96,7 +96,7 @@ const AccordionContent = (props, { element }) => {
|
|
|
96
96
|
on(
|
|
97
97
|
() => state.isExpanded,
|
|
98
98
|
(isExpanded) => {
|
|
99
|
-
if (isExpanded) {
|
|
99
|
+
if (!isExpanded) {
|
|
100
100
|
const animation2 = collapse(element);
|
|
101
101
|
accordionMethods.updateAnimationQueue(controlPromise(animation2));
|
|
102
102
|
return onCleanup(() => animation2.complete());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/accordion-content.ts"],"names":["element","animation"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../../src/components/accordion-content.ts"],"names":["element","animation"],"mappings":"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","file":"accordion-content.js","sourcesContent":["import { type CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport type { ICustomElement } from \"component-register\";\nimport { animate, type AnimationPlaybackControls } from \"motion\";\nimport { createEffect, on, onCleanup } from \"solid-js\";\n\nimport { useAccordion, useAccordionItem } from \"../hooks/index.js\";\n\ntype AccordionContentProps = {\n shouldScrollIntoView: boolean;\n};\n\nasync function controlPromise(controls: AnimationPlaybackControls) {\n return new Promise((resolve) => {\n controls.then(() => resolve(null));\n });\n}\n\nconst hideElement = (element: ICustomElement) => {\n element.style.cssText = `\n display: none;\n opacity: 0;\n visibility: hidden;\n max-height: 0px;\n `;\n element.style.overflow = null;\n};\n\nconst showElement = (element: ICustomElement) => {\n element.style.cssText = `\n display: block;\n opacity: 1;\n visibility: visible;\n `;\n};\n\nconst getHeight = (el: ICustomElement & HTMLElement) => {\n el.style.maxHeight = \"max-content\";\n const height = el.getBoundingClientRect().height;\n el.style.maxHeight = `${0}`;\n return height;\n};\n\nconst getPaddingTop = (element: ICustomElement & HTMLElement) => {\n const paddingY = parseInt(getComputedStyle(element).paddingTop);\n return paddingY;\n};\n\nconst getPaddingBottom = (element: ICustomElement & HTMLElement) => {\n const paddingY = parseInt(getComputedStyle(element).paddingBottom);\n return paddingY;\n};\n\nexport const AccordionContent: CorrectComponentType<AccordionContentProps> = (\n props,\n { element },\n) => {\n const [state] = useAccordionItem(element);\n const [_, accordionMethods] = useAccordion(element);\n\n let isFirstRender = true;\n\n const expand = (element: ICustomElement & HTMLElement) => {\n showElement(element);\n\n const height = getHeight(element),\n pt = getPaddingTop(element),\n pb = getPaddingBottom(element);\n\n (Array.from(element.children) as HTMLElement[]).forEach(\n (child) => (child.style.opacity = \"1\"),\n );\n\n const animation = animate(\n element,\n {\n maxHeight: [\"0px\", `${height}px`],\n paddingTop: [\"0px\", `${pt}px`],\n paddingBottom: [\"0px\", `${pb}px`],\n },\n {\n duration: 0.35,\n },\n );\n\n animation.then(() => {\n element.style.maxHeight = \"max-content\";\n //@ts-ignore\n element.style.overflow = null;\n if (props.shouldScrollIntoView)\n element.scrollIntoView({\n behavior: \"smooth\",\n block: \"start\",\n inline: \"nearest\",\n });\n return;\n });\n\n return animation;\n };\n\n const collapse = (element: ICustomElement & HTMLElement) => {\n const height = getHeight(element),\n pt = getPaddingTop(element),\n pb = getPaddingBottom(element);\n\n element.style.overflow = \"hidden\";\n\n (Array.from(element.children) as HTMLElement[]).forEach(\n (child) => (child.style.opacity = \"0\"),\n );\n\n const animation = animate(\n element,\n {\n maxHeight: [`${height}px`, \"0px\"],\n paddingTop: [`${pt}px`, \"0px\"],\n paddingBottom: [`${pb}px`, \"0px\"],\n },\n {\n duration: 0.35,\n },\n );\n\n animation.then(() => hideElement(element));\n\n return animation;\n };\n\n createEffect(\n on(\n () => state.isExpanded,\n (isExpanded) => {\n if (!isExpanded) {\n const animation = collapse(element);\n accordionMethods.updateAnimationQueue(controlPromise(animation));\n return onCleanup(() => animation.complete());\n }\n\n if (isFirstRender) {\n isFirstRender = false;\n showElement(element);\n }\n\n const animation = expand(element);\n accordionMethods.updateAnimationQueue(controlPromise(animation));\n return onCleanup(() => animation.complete());\n },\n ),\n );\n};\n"]}
|