retro-react/dist/cjs/components/accordion/Accordion.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),n=require("react"),i=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),o=require("../../utils/classNames.js"),s=require("../../constants/commonClassNames.js"),r=require("./Accordion.styled.js");const d=n.forwardRef(((d,a)=>{var{id:c,className:t,title:l="",icon:u,children:x,defaultOpen:j=!1,disabled:m=!1,loading:g=!1,onToggle:h,animated:p=!0,expandIcon:v,collapseIcon:b,sxHeader:f,sx:A}=d,$=e.__rest(d,["id","className","title","icon","children","defaultOpen","disabled","loading","onToggle","animated","expandIcon","collapseIcon","sxHeader","sx"]);const[N,I]=n.useState(j),[O,C]=n.useState("0px"),q=n.useRef(null),w=n.useRef(null),y=n.useCallback((()=>{q.current&&C(`${q.current.scrollHeight}px`)}),[]);n.useEffect((()=>(y(),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)})),[y,x]);const H=()=>{if(m||g)return;const e=!N;I(e),h&&h(e)};return i.jsxs(r.AccordionWrapper,Object.assign({ref:a,id:c,sx:A,className:o.classNames("accordion-root",t,s.default)},$,{children:[i.jsxs(r.AccordionHeader,Object.assign({ref:w,onClick:H,onKeyDown:e=>{m||g||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),H())},$disabled:m,$loading:g,sx:f,"aria-expanded":N,"aria-controls":`${c}-content`,"aria-disabled":m,disabled:m,className:"accordion-header",tabIndex:m?-1:0},{children:[i.jsxs(r.AccordionHeaderContent,{children:[u&&i.jsx(r.AccordionIcon,{children:u},void 0),i.jsx(r.AccordionTitle,{children:l},void 0)]},void 0),i.jsx(r.AccordionToggleIcon,Object.assign({$isOpen:N,$loading:g},{children:g?"⧗":v&&b?N?b:v:N?"▼":"▶"}),void 0)]}),void 0),i.jsx(r.AccordionContent,Object.assign({ref:q,$isOpen:N,$maxHeight:O,$animated:p,role:"region","aria-labelledby":`${c}-header`,"aria-hidden":!N,id:`${c}-content`,className:"accordion-content"},{children:i.jsx(r.AccordionContentInner,{children:g?i.jsxs(r.LoadingContent,{children:[i.jsx(r.LoadingSpinner,{children:"⧗"},void 0),i.jsx("span",{children:"Loading..."},void 0)]},void 0):x},void 0)}),void 0)]}),void 0)}));d.displayName="Accordion",exports.Accordion=d;