Function renderProp

packages/dev/s2-docs/src/VisualExampleClient.tsx:432–504

(name: string, value: any, control?: PropControl, indent = '')

}

function renderProp(name: string, value: any, control?: PropControl, indent = '') {
  if (value === control?.default) {
    return null;
  }

  let propName = <span className={style({color: 'indigo-1000'})}>{name}</span>;
  let propValue: any = null;
  if (typeof value === 'string') {
    propValue = <span className={style({color: 'green-1000'})}>"{value}"</span>;
  } else if (typeof value === 'number') {
    propValue = (
      <>
        {'{'}
        <span className={style({color: 'pink-1000'})}>{String(value)}</span>
        {'}'}
      </>
    );
  } else if (typeof value === 'boolean') {
    if (value === false && control?.optional) {
      return null;
    }
    if (name === 'contextualHelp') {
      let res = renderElement(
        'ContextualHelp',
        {
          children: [
            renderElement('Heading', {children: 'Heading'}),
            renderElement('Content', {children: 'Content'})
          ]
        },
        undefined,
        indent + '    '
      );
      propValue = (
        <>
          {`{\n    ${indent}`}
          {res}
          {`\n  ${indent}}`}
        </>
      );
    } else {
      propValue =
        value === false ? (
          <>
            {'{'}
            <span className={style({color: 'magenta-1000'})}>{String(value)}</span>
            {'}'}
          </>
        ) : null;
    }
  } else if (value == null) {
    return null;
  } else if (typeof value === 'object') {
    propValue = (
      <>
        {'{'}
        {renderValue(value, indent)}
        {'}'}