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

Async API docs for Redocly Realm

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