@redocly/graphql-docs/lib-esm/src/navigation/components/SectionOverview.js

Redocly GraphQL docs

import{jsx as a,jsxs as d}from"react/jsx-runtime";import{memo as h,useCallback as v,useMemo as f,useState as x}from"react";import{useNavigate as b}from"react-router-dom";import{Button as g,Tag as w}from"@redocly/theme";import{joinPath as S}from"../utils/join.js";import{styled as t}from"../../styled-components.js";import{PanelHeading as k}from"../../definition/components/styled.js";import{TypeGroup as m}from"../../schema/models/type-group.js";import{useStore as y}from"../../app/index.js";const M=t.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-xxs);

  @media screen and (min-width: 1280px) {
    width: calc(var(--panel-samples-width) - 32px);
  }
`,j=t(k)`
  border-bottom: none;
  padding: 0;
`,I=t(g)`
  border-radius: var(--border-radius);
  background: var(--bg-color);
  justify-content: space-between;

  & > span {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-unit);
    overflow-x: hidden;
  }

  &:hover {
    background: var(--bg-color);
  }

  &:hover::after {
    content: '→';
    line-height: var(--line-height-base);
  }
`,C=t.div`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit);
`,O=t.div`
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
`,T=t(w)`
  text-transform: none;
  height: 20px;
`,W=t(g)`
  margin-top: var(--spacing-xs);
`,p=8;function _(e,r,n){return n===m.mutations?e?.getMutationField(r)?.args:n===m.queries?e?.getQueryField(r)?.args:[]}function A({item:e,typeGroupId:r,baseUrl:n,id:s}){const i=b(),c=y(),o=f(()=>_(c,e,r),[c,e,r]),l=v(u=>{i(S(n,s,u))},[n,s,i]);return a(I,{className:"button-variant-outlined",onClick:()=>l(e),children:d(O,{children:[e,o&&o.length>0&&a(T,{borderless:!0,children:o.length===1?o[0].name:"(...args)"})]})},e)}function B({items:e,typeGroupId:r,baseUrl:n,id:s}){const[i,c]=x(!1),o=i?e:e.slice(0,p);return d(M,{children:[a(j,{children:"Overview"}),a(C,{children:o.map(l=>a(A,{item:l,typeGroupId:r,baseUrl:n,id:s},l))}),e.length>p&&!i&&d(W,{variant:"link",size:"medium",fullWidth:!0,onClick:()=>c(!0),children:["Show ",e.length-p," more..."]})]})}const D=h(B);export{D as SectionOverview,B as SectionOverviewComponent};