@redocly/asyncapi-docs/lib-esm/src/components/MessageSection.js

Async API docs for Redocly Realm

import{jsx as s,jsxs as a}from"react/jsx-runtime";import p from"styled-components";import{useAtomValue as L}from"jotai";import{useLocation as W}from"react-router-dom";import{Row as x,SamplesMiddlePanel as A,OperationSamplesPanel as z,Dropdown as H,makeDeepLink as T,pathIncludesLink as $}from"@redocly/openapi-docs";import{LayoutVariant as F,H4 as N,Typography as V,Segmented as q,LinkIcon as E}from"@redocly/theme";import G,{useEffect as I,useMemo as r,useRef as K,useState as P,useCallback as _}from"react";import*as J from"openapi-sampler";import{SamplesPanel as Q}from"./SamplesPanel";import{MessageBinding as U}from"./MessageBinding";import{layoutAtom as X,routingBasePathAtom as Y}from"../jotai/app";import{Message as Z}from"./Message";import{getSchema as ee}from"../utils";import{LinkToField as j}from"./common";import{useOtelTelemetry as te}from"../hooks";const ne=3,Se=G.memo(({messages:o,id:i})=>{const l=W(),O=r(()=>o.find(e=>$(l,`m=${e.key}`))||o[0],[o,l]),[t,y]=P(O),R=_(()=>t.value.examples||[{payload:J.sample(Object.assign({},ee(t.value.payload)))}],[t]),d=L(X),c=L(Y),u=d===F.STACKED,m=r(()=>o.map(e=>({label:e.value.title||e.value.name,value:e.key})),[o]),[g,B]=P(!1),f=K(null),v=te();I(()=>{const e=o.find(n=>$(l,`m=${n.key}`));e&&y(e)},[l,o]);const k=_(({value:e})=>{const n=o.find(h=>h.key===e);n&&(v.send({type:"asyncapi_docs.switch_message.clicked",payload:{message:n.key}}),y(n))},[o,v]),S=r(()=>Object.entries(t.value.bindings||{}).map(([e,n])=>({key:e,value:n})),[t.value.bindings]),M=r(()=>`/${c}${T(i,`messages&m=${t.key}`)}`,[i,c,t.key]);I(()=>{if(!f.current)return;const e=()=>{var n;const h=(n=f.current)===null||n===void 0?void 0:n.querySelectorAll('button[role="tab"]'),b=Array.from(h||[]).some(w=>w.offsetWidth<w.scrollWidth);b!==g&&B(b)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[g,m]);const C=r(()=>`/${c}${T(i,"messages")}`,[i,c]);return a(oe,{"data-component-name":"MessageSection/MessageSection",children:[s(x,{layout:d,children:a(A,{isStacked:u,children:[a(se,{children:[s(j,{to:C}),"Messages"]}),o.length>1?a(D,{children:["Accepts ",s("span",{children:"one of"})," the following messages:"]}):s(D,{children:"Accepts the following message:"})]})}),a(x,{layout:d,children:[a(A,{isStacked:u,children:[a(ae,{children:[s(j,{to:M}),m.length>ne||g?s(H,{options:m,value:t.key,onChange:k}):s(q,{ref:f,size:"small",value:t.key,options:m,onChange:k})]}),s(Z,{message:t.value,sectionId:i,id:t.key})]}),a(z,{isStacked:u,className:"panel-container-response-samples",children:[s(Q,{examples:R()}),!!S.length&&s(U,{binding:S[0],slug:M})]})]})]})}),oe=p.div`
  padding: var(--spacing-xl) 0 0 0;
`,se=p(N)`
  margin: 0 0 var(--spacing-xs) 0;
  position: relative;
  :hover {
    ${E} {
      opacity: 1;
      visibility: visible;
    }
  }
`,D=p(V)`
  & > span {
    font-weight: var(--font-weight-bold);
  }
  margin: 0 0 var(--spacing-sm) 0;
`,ae=p.div`
  position: relative;
  :hover {
    ${E} {
      opacity: 1;
      visibility: visible;
    }
  }
`;export{Se as MessageSection};