@redocly/asyncapi-docs/lib/components/ItemsNavigation.js

Async API docs for Redocly Realm

import{jsx as r,jsxs as d}from"react/jsx-runtime";import o from"styled-components";import{useNavigate as S}from"react-router-dom";import{SamplesPanel as A}from"@redocly/openapi-docs";import{LayoutVariant as I}from"@redocly/config";import{useAtomValue as f}from"jotai/index";import{useMemo as z,useState as j}from"react";import{Button as C}from"@redocly/theme/components/Button/Button";import{layoutAtom as P,definitionAtom as E}from"../jotai-store/app.js";import{ActionTag as L}from"./common/index.js";import{useProtocolLabels as _}from"../hooks/index.js";const p=8,J=({items:t,firstChannelBinding:u})=>{const[n,v]=j(!1),{getProtocolLabel:i}=_(u),x=S(),b=f(P),h=f(E),y=b===I.STACKED,{displayItems:w,count:m}=z(()=>{const e=t?.filter(a=>{var c;return a.type==="channel"&&((c=h.channels)===null||c===void 0?void 0:c[a.id])})||[],s=n?e:e.slice(0,p),l=!n&&e.length>p?e.length-p:0;return{displayItems:s,count:l}},[t,n,h.channels]),k=e=>{x(e)};return d(B,{isStacked:y,children:[r(M,{children:i("channels")}),w.map(({id:e,type:s,label:l,link:a})=>s==="channel"?r(N,{variant:"outlined",size:"large",onClick:()=>k(a),children:d("span",{children:[r(L,{color:i("channel").toLowerCase(),children:i("channel")}),r(T,{children:l})]})},e):null),!n&&!!m&&d(g,{variant:"link",size:"large","data-testid":"show-more-operations",fullWidth:!0,onClick:()=>v(!0),children:["Show ",m," more..."]})]})},B=o(A)`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding-top: var(--spacing-xxl);
`,g=o(C)`
  & + & {
    margin-left: 0;
  }
`,N=o(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);
  }
`,T=o.span`
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color-primary);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
`,M=o.span`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-color-primary);
  margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
`;export{J as ItemsNavigation};