react-accordion-simple
Version:
Simple to use react accordion wrapper component with style config.
3 lines (2 loc) • 2.15 kB
JavaScript
;var n=require("react/jsx-runtime"),e=require("react");!function(n,e){void 0===e&&(e={});var t=e.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.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}");exports.AccordionComponent=t=>{const r=e.useMemo((()=>`\n .accordion-wrapper .title {\n padding: ${t.titlePadding};\n border-bottom: solid 1px ${t.borderBottomColour};\n background-color: ${t.titleBackgroundColour};\n color: ${t.titleColour};\n\n }\n\n .accordion-wrapper .content {\n background-color: ${t.contentBackgroundColour};\n color: ${t.contentColour};\n padding: ${t.contentPadding};\n padding-top: 0;\n padding-bottom: 0;\n }\n\n .accordion-wrapper.active .content {\n max-height: unset;\n padding: ${t.contentPadding};\n }\n `),[]);e.useEffect((()=>{}),[r]);const[o,c]=e.useState((()=>Object.entries(t.children).map(((n,e)=>0===e))));const a=t.children.map(((e,t)=>n.jsx("div",{"data-index":t,className:o[t]?"accordion-wrapper active":"accordion-wrapper",onClick:n=>function(n){const e=n.target;if(null!==e&&null!==e.closest(".accordion-wrapper")){const n=Number(e.closest(".accordion-wrapper").getAttribute("data-index")),t=o.map(((e,t)=>n==t));c(t)}}(n),children:e},t)));return n.jsxs(n.Fragment,{children:[n.jsx("style",{children:r}),a]})};
//# sourceMappingURL=index.js.map