react-accordion-simple
Version:
Simple to use react accordion wrapper component with style config.
3 lines (2 loc) • 2.17 kB
JavaScript
import{jsx as n,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useMemo as e,useEffect as o,useState as c}from"react";!function(n,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}(".accordion-wrapper .title {\r\n cursor: pointer;\r\n}\r\n\r\n.accordion-wrapper .title:last-child {\r\n border-bottom: 0;\r\n}\r\n\r\n.accordion-wrapper .content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: all 0.1s linear;\r\n}\r\n\r\n.accordion-wrapper.active .content {\r\n max-height: unset;\r\n}");const a=a=>{const i=e((()=>`\n .accordion-wrapper .title {\n padding: ${a.titlePadding};\n border-bottom: solid 1px ${a.borderBottomColour};\n background-color: ${a.titleBackgroundColour};\n color: ${a.titleColour};\n\n }\n\n .accordion-wrapper .content {\n background-color: ${a.contentBackgroundColour};\n color: ${a.contentColour};\n padding: ${a.contentPadding};\n padding-top: 0;\n padding-bottom: 0;\n }\n\n .accordion-wrapper.active .content {\n max-height: unset;\n padding: ${a.contentPadding};\n }\n `),[]);o((()=>{}),[i]);const[d,l]=c((()=>Object.entries(a.children).map(((n,t)=>0===t))));const p=a.children.map(((t,r)=>n("div",{"data-index":r,className:d[r]?"accordion-wrapper active":"accordion-wrapper",onClick:n=>function(n){const t=n.target;if(null!==t&&null!==t.closest(".accordion-wrapper")){const n=Number(t.closest(".accordion-wrapper").getAttribute("data-index")),r=d.map(((t,r)=>n==r));l(r)}}(n),children:t},r)));return t(r,{children:[n("style",{children:i}),p]})};export{a as AccordionComponent};
//# sourceMappingURL=index.js.map