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

Async API docs for Redocly Realm

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