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

Redocly GraphQL docs

var x=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(e,r)=>{for(var n in r)l(e,n,{get:r[n],enumerable:!0})},m=(e,r,n,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of b(r))!w.call(e,a)&&a!==n&&l(e,a,{get:()=>r[a],enumerable:!(i=u(r,a))||i.enumerable});return e};var d=(e,r,n)=>(n=e!=null?x(h(e)):{},m(r||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e)),E=e=>m(l({},"__esModule",{value:!0}),e);var B={};y(B,{ViewNested:()=>k});module.exports=E(B);var t=d(require("react")),o=d(require("styled-components")),f=require("graphql"),s=require("../icons/CircleIcon");function N({expanded:e,level:r,expandText:n="Show details",collapseText:i="Hide details",children:a,args:g=[],onClick:v}){const p=e?(0,s.cycleColorsByLevel)(r):void 0;return t.default.createElement(z,{$expanded:e,className:"view-nested-wrapper"},t.default.createElement(C,null,t.default.createElement($,{onClick:v},t.default.createElement(s.CircleIcon,{sign:e?"-":"+",color:p}),t.default.createElement(W,null,e?i:n)),!e&&t.default.createElement(A,null,g.map(c=>t.default.createElement(R,{key:c.name},c.name,(0,f.isRequiredArgument)(c)?t.default.createElement(S,null,"*"):null)))),e&&t.default.createElement(q,{color:p},a))}const k=(0,t.memo)(N),z=o.default.div`
  width: 100%;
  margin: var(--spacing-xxs) 0;
  display: flex;
  flex-direction: row;

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

  ${({$expanded:e})=>e&&o.css`
      flex-direction: column;
    `}
`,C=o.default.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
`,S=o.default.span`
  color: var(--color-error-base);
`,W=o.default.div`
  width: max-content;
`,A=o.default.div`
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  align-items: baseline;
`,R=o.default.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);
`,$=o.default.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);
`,q=o.default.div`
  position: relative;
  width: 100%;
  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)"};
  }
`;0&&(module.exports={ViewNested});