UNPKG

@anoki/fse-ui

Version:

FSE UI components library

3 lines (2 loc) 2.78 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components/ui/TableOfContents/TableOfContents.css');const o=require("./index.cjs244.js"),r=require("react");;/* empty css */const N=require("./index.cjs281.js"),m=require("./index.cjs246.js"),q=require("./index.cjs9.js"),S=require("./index.cjs158.js"),T=require("./index.cjs414.js"),k=({title:p="Indice",headings:n,titleTag:h="h1",modeAuthenticated:f=!1,isOpen:i,onToggle:l=()=>{}})=>{const[j,a]=r.useState(""),[b,w]=r.useState(0),d=N.useMediaQueryV2("(min-width: 768px)",!1),g=d||i;r.useEffect(()=>{const t=()=>{const s=window.scrollY,e=document.documentElement.scrollHeight-window.innerHeight,c=e>0?Math.min(s/e*100,100):0;w(c)};return window.addEventListener("scroll",t),t(),()=>window.removeEventListener("scroll",t)},[]);const u=r.useCallback(t=>{if(window.innerWidth<768)return;const s=document.querySelector(`a[href="#${t}"]`),e=document.querySelector(".toc-scroll");if(s&&e){const c=e.getBoundingClientRect(),x=s.getBoundingClientRect();if(!(x.top>=c.top&&x.bottom<=c.bottom)){const v=s.offsetTop,E=e.clientHeight,R=s.offsetHeight,y=v-E/2+R/2;e.scrollTo({top:y,behavior:"smooth"})}}},[d]);return r.useEffect(()=>{const t=new IntersectionObserver(s=>{s.forEach(e=>{e.isIntersecting&&(a(e.target.id),u(e.target.id))})},{rootMargin:"-230px 0px -60% 0px",threshold:0});return n.forEach(({id:s})=>{const e=document.getElementById(s);e&&t.observe(e)}),()=>t.disconnect()},[n]),o.jsxRuntimeExports.jsxs("div",{className:m.clsx("toc-container",{"toc-container-authenticated":f}),children:[o.jsxRuntimeExports.jsx("button",{className:"ui-button-accordion-toc",onClick:l,type:"button",children:o.jsxRuntimeExports.jsxs(q.Row,{className:"ui-header-table-of-contents",children:[o.jsxRuntimeExports.jsx(h,{className:"text-slate-20 fw-semibold fs-7",children:p}),o.jsxRuntimeExports.jsx(S.ArrowDown,{color:"primary",className:m.clsx("ui-arrow-toc",{"ui-expanded-toc":i})})]})}),o.jsxRuntimeExports.jsx("div",{className:"scroll-progress-bar",children:o.jsxRuntimeExports.jsx("div",{className:"scroll-progress",style:{width:`${b}%`}})}),g&&o.jsxRuntimeExports.jsx(T.ScrollArea,{type:"always",scrollbars:"vertical",className:"toc-scroll fw-semibold fs-6",children:o.jsxRuntimeExports.jsx("div",{className:"toc-list base-col",children:n.map(t=>o.jsxRuntimeExports.jsx("div",{className:"toc-item",children:o.jsxRuntimeExports.jsx("a",{href:`#${t.id}`,className:`toc-link ${j===t.id?"active text-primary":"text-slate-28"}`,onClick:s=>{var e;s.preventDefault(),a(t.id),setTimeout(()=>{u(t.id)},100),(e=document.getElementById(t.id))==null||e.scrollIntoView({behavior:"smooth"}),l()},children:t.text})},t.id))})})]})};exports.TableOfContents=k; //# sourceMappingURL=index.cjs110.js.map