Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import * as React from 'react'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'
const ArrayOf = ({ type }) => (
<React.Fragment>
<span>[</span>
<Type type={type} />
<span>]</span>
</React.Fragment>
)
const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
const parseRaw = raw => raw.replace(/Type$/, '').replace(/Type.isRequired$/, '!')
const printName = ({ name, raw, required }) => capitalize(raw && name === 'custom' ? parseRaw(raw) : name)
const prettyType = ({ required, name, raw }) => `${printName({ name, raw })}${required ? '!' : ''}`.replace(/!!$/, '!')
const Shape = ({ type }) => {
const entries = Object.entries(type)
return (
<React.Fragment>
{'{ '}
{entries.map(([propName, data], index) => (
<span key={propName}>
{propName}: {prettyType(data)}
{entries.length - 1 !== index ? ', ' : ''}
</span>
))}
{' }'}
{type.required && '!'}
</React.Fragment>
)
}
const Type = ({ type }) => {
if (type.name === 'arrayOf') {
return <ArrayOf type={type.value} />
}
if (type.name === 'shape') {
return <Shape type={type.value} />
}
if (type.name) return prettyType(type)
return 'woot'
}
const Prop = ({ name, data }) => (
<TableRow>
<TableCell>{name}</TableCell>
<TableCell>
<pre>
<Type type={{ ...data.type, required: data.required }} />
</pre>
</TableCell>
<TableCell>{data.default}</TableCell>
<TableCell>{data.description}</TableCell>
</TableRow>
)
const PropsTable = ({ props }) => (
<Table>
<TableHead>
<TableRow>
<TableCell>
<b>Property</b>
</TableCell>
<TableCell>Type</TableCell>
<TableCell>Default</TableCell>
<TableCell>Description</TableCell>
</TableRow>
</TableHead>
<TableBody>{Object.entries(props).map(([name, data]) => <Prop key={name} name={name} data={data} />)}</TableBody>
</Table>
)
export default ({ children, of: Component }) => {
if (!Component) return 'No component'
if (!Component.__docgenInfo) return 'No propTypes info'
const { props, description } = Component.__docgenInfo
if (!props) return 'No prop data'
return <PropsTable props={props} />
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.