@redocly/graphql-docs/lib-esm/src/common/components/ViewNested.js

Redocly GraphQL docs

import{jsx as o,jsxs as i}from"react/jsx-runtime";import{memo as m}from"react";import{css as f}from"styled-components";import{isRequiredArgument as x}from"graphql";import{CircleIcon as g,cycleColorsByLevel as h}from"../icons/CircleIcon.js";import{styled as r}from"../../styled-components.js";function v({expanded:e,level:a,expandText:s="Show details",collapseText:l="Hide details",children:c,args:p=[],onClick:d}){const t=e?h(a):void 0;return i(b,{$expanded:e,className:"view-nested-wrapper",children:[i(u,{children:[i(z,{onClick:d,children:[o(g,{sign:e?"-":"+",color:t}),o(y,{children:e?l:s})]}),!e&&o(N,{children:p.map(n=>i(j,{children:[n.name,x(n)?o(w,{children:"*"}):null]},n.name))})]}),e&&o(C,{color:t,children:c})]})}const B=m(v),b=r.div`
  width: 100%;
  margin: var(--spacing-xxs) 0;
  display: flex;
  flex-direction: row;

  &:last-child {
    margin-bottom: 0;
  }

  ${({$expanded:e})=>e&&f`
      flex-direction: column;
    `}
`,u=r.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
`,w=r.span`
  color: var(--color-error-base);
`,y=r.div`
  width: max-content;
`,N=r.div`
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  align-items: baseline;
`,j=r.span`
  color: var(--schema-inline-code-text-color);
  background-color: var(--bg-color-active);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  padding: 0 var(--spacing-xs);
  border-radius: var(--border-radius);
`,z=r.button`
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  gap: var(--spacing-xxs);
  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
`,C=r.div`
  position: relative;
  padding-left: var(--schema-nested-offset);
  margin: 0 0 0 10px;

  &:before {
    content: '';
    height: calc(100% + 1px);
    position: absolute;
    top: -1px;
    left: -0.5px;
    border-left: 1px solid ${({color:e})=>e||"var(--border-color-primary)"};
  }
`;export{B as ViewNested};