@brytdesigns/web-component-accordion 1.0.0 → 1.0.2
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"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createContext, provide, consume } from 'component-register';
|
|
2
|
-
import { splitProps, createEffect, batch,
|
|
2
|
+
import { splitProps, createEffect, batch, untrack, mergeProps } from 'solid-js';
|
|
3
3
|
import { toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-utils';
|
|
4
4
|
import { useAccordion } from './useAccordion.js';
|
|
5
5
|
|
|
@@ -33,6 +33,11 @@ function initializeAccordionItemContext(props) {
|
|
|
33
33
|
setElementState("ariaExpanded", isActive);
|
|
34
34
|
});
|
|
35
35
|
});
|
|
36
|
+
createEffect(() => {
|
|
37
|
+
const index = untrack(() => stateProps.index);
|
|
38
|
+
const isExpanded = stateProps.isExpanded;
|
|
39
|
+
if (isExpanded) methods.item.update(index);
|
|
40
|
+
});
|
|
36
41
|
function setActive(index) {
|
|
37
42
|
methods.item.update(index);
|
|
38
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useAccordionItem.ts"],"names":[],"mappings":"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","file":"useAccordionItem.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { batch, createEffect, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n toHyphenated,\n getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\nimport { useAccordion } from \"./useAccordion.js\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n isExpanded: boolean;\n index: number;\n ariaExpanded: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AccordionItemContext = ReturnType<typeof initializeAccordionItemContext>;\n\nfunction initializeAccordionItemContext(props: CreateContextOptions) {\n const [element, privateProps, stateProps] = splitProps(\n props,\n [\"root\"],\n [\"ariaExpanded\"],\n );\n const [context, methods] = useAccordion(element.root);\n\n function setElementState(\n key: keyof Omit<CreateContextOptions, \"root\">,\n value: boolean | number | ((v: boolean | number) => boolean | number),\n ) {\n const currentValue = untrack(() => props[key]);\n if (typeof value === \"function\") {\n let result: boolean | number = false;\n if (typeof currentValue === \"number\") {\n result = value(currentValue || 0);\n } else if (typeof currentValue === \"boolean\") {\n result = value(currentValue || false);\n }\n if (`${currentValue}` === `${value}`) return;\n element.root.setAttribute(toHyphenated(key), `${result}`);\n return;\n }\n if (`${currentValue}` === `${value}`) return;\n return element.root.setAttribute(toHyphenated(key), `${value}`);\n }\n\n createEffect(() => {\n const isActive = methods.item.isActive(props.index);\n batch(() => {\n setElementState(\"isExpanded\", isActive);\n setElementState(\"ariaExpanded\", isActive);\n });\n });\n\n function setActive(index: number) {\n methods.item.update(index);\n }\n\n return [\n mergeProps(stateProps, {\n get isAnimating() {\n return context.isAnimating;\n },\n }),\n { setElementState, setActive },\n ] as const;\n}\n\nconst AccordionItemContextState = createContext(initializeAccordionItemContext);\n\nexport const provideAccordionItemContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): AccordionItemContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(AccordionItemContextState, props, element);\n};\n\nexport const useAccordionItemContext = (context: AccordionItemContext) => {\n const [state, { setElementState, setActive }] = context;\n\n function expand() {\n const index = untrack(() => state.index);\n batch(() => {\n setActive(index);\n setElementState(\"isExpanded\", true);\n });\n }\n\n function collapse() {\n batch(() => {\n setActive(-1);\n setElementState(\"isExpanded\", false);\n });\n }\n\n function toggle() {\n setElementState(\"isExpanded\", (v) => {\n const index = untrack(() => state.index);\n const newValue = !v;\n if (newValue) setActive(index);\n else setActive(-1);\n return newValue;\n });\n }\n\n return [state, { expand, collapse, toggle }] as const;\n};\n\nexport const useAccordionItem = (element: HTMLElement & ICustomElement) => {\n const context: AccordionItemContext = consume(\n AccordionItemContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n );\n }\n\n return useAccordionItemContext(context);\n};\n\nexport const getAccordionItemContext = (element: Element) => {\n const context = getContextFromProvider<AccordionItemContext>(\n AccordionItemContextState,\n element,\n );\n return useAccordionItemContext(context);\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useAccordionItem.ts"],"names":[],"mappings":"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","file":"useAccordionItem.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { batch, createEffect, mergeProps, splitProps, untrack } from \"solid-js\";\nimport {\n toHyphenated,\n getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\nimport { useAccordion } from \"./useAccordion.js\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n isExpanded: boolean;\n index: number;\n ariaExpanded: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AccordionItemContext = ReturnType<typeof initializeAccordionItemContext>;\n\nfunction initializeAccordionItemContext(props: CreateContextOptions) {\n const [element, privateProps, stateProps] = splitProps(\n props,\n [\"root\"],\n [\"ariaExpanded\"],\n );\n const [context, methods] = useAccordion(element.root);\n\n function setElementState(\n key: keyof Omit<CreateContextOptions, \"root\">,\n value: boolean | number | ((v: boolean | number) => boolean | number),\n ) {\n const currentValue = untrack(() => props[key]);\n if (typeof value === \"function\") {\n let result: boolean | number = false;\n if (typeof currentValue === \"number\") {\n result = value(currentValue || 0);\n } else if (typeof currentValue === \"boolean\") {\n result = value(currentValue || false);\n }\n if (`${currentValue}` === `${value}`) return;\n element.root.setAttribute(toHyphenated(key), `${result}`);\n return;\n }\n if (`${currentValue}` === `${value}`) return;\n return element.root.setAttribute(toHyphenated(key), `${value}`);\n }\n\n createEffect(() => {\n const isActive = methods.item.isActive(props.index);\n batch(() => {\n setElementState(\"isExpanded\", isActive);\n setElementState(\"ariaExpanded\", isActive);\n });\n });\n\n createEffect(() => {\n const index = untrack(() => stateProps.index);\n const isExpanded = stateProps.isExpanded;\n if (isExpanded) methods.item.update(index);\n });\n\n function setActive(index: number) {\n methods.item.update(index);\n }\n\n return [\n mergeProps(stateProps, {\n get isAnimating() {\n return context.isAnimating;\n },\n }),\n { setElementState, setActive },\n ] as const;\n}\n\nconst AccordionItemContextState = createContext(initializeAccordionItemContext);\n\nexport const provideAccordionItemContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): AccordionItemContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(AccordionItemContextState, props, element);\n};\n\nexport const useAccordionItemContext = (context: AccordionItemContext) => {\n const [state, { setElementState, setActive }] = context;\n\n function expand() {\n const index = untrack(() => state.index);\n batch(() => {\n setActive(index);\n setElementState(\"isExpanded\", true);\n });\n }\n\n function collapse() {\n batch(() => {\n setActive(-1);\n setElementState(\"isExpanded\", false);\n });\n }\n\n function toggle() {\n setElementState(\"isExpanded\", (v) => {\n const index = untrack(() => state.index);\n const newValue = !v;\n if (newValue) setActive(index);\n else setActive(-1);\n return newValue;\n });\n }\n\n return [state, { expand, collapse, toggle }] as const;\n};\n\nexport const useAccordionItem = (element: HTMLElement & ICustomElement) => {\n const context: AccordionItemContext = consume(\n AccordionItemContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"AccordionItemContext not found! Please ensure to wrap your custom element with accordion-item element.\",\n );\n }\n\n return useAccordionItemContext(context);\n};\n\nexport const getAccordionItemContext = (element: Element) => {\n const context = getContextFromProvider<AccordionItemContext>(\n AccordionItemContextState,\n element,\n );\n return useAccordionItemContext(context);\n};\n"]}
|