UNPKG

@anoki/fse-ui

Version:

FSE UI components library

3 lines (2 loc) 2.28 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components/ui/TableOfContents/TableOfContents.css');const t=require("./index.cjs180.js"),o=require("react");;/* empty css */const h=require("./index.cjs198.js"),w=require("./index.cjs182.js"),E=require("./index.cjs9.js"),f=require("./index.cjs113.js"),v=require("./index.cjs309.js"),b=({title:l="Indice",headings:c,titleTag:a="h3",isOpen:n,onToggle:i=()=>{}})=>{const[d,u]=o.useState(""),[x,m]=o.useState(0),p=h.useMediaQuery("(min-width: 768px)")||n;return o.useEffect(()=>{const e=()=>{const r=window.scrollY,s=document.documentElement.scrollHeight-window.innerHeight,j=s>0?Math.min(r/s*100,100):0;m(j)};return window.addEventListener("scroll",e),e(),()=>window.removeEventListener("scroll",e)},[]),o.useEffect(()=>{const e=new IntersectionObserver(r=>{r.forEach(s=>{s.isIntersecting&&u(s.target.id)})},{rootMargin:"-100px 0px -50% 0px",threshold:0});return c.forEach(({id:r})=>{const s=document.getElementById(r);s&&e.observe(s)}),()=>e.disconnect()},[c]),t.jsxRuntimeExports.jsxs("div",{className:"toc-container",children:[t.jsxRuntimeExports.jsx("button",{className:"ui-button-accordion-toc",onClick:i,type:"button",children:t.jsxRuntimeExports.jsxs(E.Row,{className:"ui-header-table-of-contents",children:[t.jsxRuntimeExports.jsx(a,{className:"text-slate-20 fw-semibold fs-7",children:l}),t.jsxRuntimeExports.jsx(f.ArrowDown,{color:"primary",className:w.clsx("ui-arrow-toc",{"ui-expanded-toc":n})})]})}),t.jsxRuntimeExports.jsx("div",{className:"scroll-progress-bar",children:t.jsxRuntimeExports.jsx("div",{className:"scroll-progress",style:{width:`${x}%`}})}),p&&t.jsxRuntimeExports.jsx(v.ScrollArea,{type:"always",scrollbars:"vertical",className:"toc-scroll fw-semibold fs-6",children:t.jsxRuntimeExports.jsx("div",{className:"toc-list base-col",children:c.map(e=>t.jsxRuntimeExports.jsx("div",{className:"toc-item",children:t.jsxRuntimeExports.jsx("a",{href:`#${e.id}`,className:`toc-link ${d===e.id?"active text-primary":"text-slate-28"}`,onClick:r=>{var s;r.preventDefault(),(s=document.getElementById(e.id))==null||s.scrollIntoView({behavior:"smooth"}),i()},children:e.text})},e.id))})})]})};exports.TableOfContents=b; //# sourceMappingURL=index.cjs100.js.map