{"size": 1504, "ext": "js", "max_stars_repo_path": "packages/gatsby-theme-patternfly-org/components/propsTable/propsTable.js", "max_stars_repo_name": "jenny-s51/patternfly-org", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/gatsby-theme-patternfly-org/components/propsTable/propsTable.js", "max_issues_repo_name": "jenny-s51/patternfly-org", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/gatsby-theme-patternfly-org/components/propsTable/propsTable.js", "max_forks_repo_name": "jenny-s51/patternfly-org", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.873015873, "max_line_length": 111, "alphanum_fraction": 0.5119680851}
import React from 'react';
import { Badge } from '@patternfly/react-core';
import { Table, TableHeader, TableBody } from '@patternfly/react-table';

const renderType = prop => {
  if (prop.annotatedType) {
    return prop.annotatedType;
  }
  else if (prop.type) {
    // JS prop
    return prop.type.name;
  } else if (prop.tsType) {
    // TS Prop
    if (prop.tsType.raw) {
      // Raw is like 'h1' | 'h2' | 'h3'
      return prop.tsType.raw;
    }
    return prop.tsType.name;
  }

  return '';
};

export const PropsTable = props => {
  const columns = [
    { title: 'Name' },
    { title: 'Type' },
    { title: 'Required' },
    { title: 'Default' },
    { title: 'Description' }
  ];

  return (
    <Table
      variant="compact"
      aria-label={props.caption}
      cells={columns}
      caption={props.caption}
      gridBreakPoint="grid-lg"
      rows={props.rows
        .filter(row => !row.hide)
        .map((row, idx) => ({
          cells: [
            <div className='pf-m-fit-content'>
              {row.deprecated && 'Deprecated: '}
              {row.name}
              {row.beta && <Badge key={`${row.name}-${idx}`} className="ws-beta-badge pf-u-ml-sm">Beta</Badge>}
            </div>,
            renderType(row),
            <div>
              {row.required ? 'Yes' : 'No'}
            </div>,
            row.defaultValue && row.defaultValue.value,
            row.description
          ]
        }))}
    >
      <TableHeader />
      <TableBody />
    </Table>
  );
}
