diff --git a/packages/docz/src/components/PropsTable.tsx b/packages/docz/src/components/PropsTable.tsx index 1fe3dc785..6af03b94e 100644 --- a/packages/docz/src/components/PropsTable.tsx +++ b/packages/docz/src/components/PropsTable.tsx @@ -18,15 +18,18 @@ export interface FlowTypeArgs { } } +export interface PropType { + name: string + value?: any +} + export interface Prop { required: boolean description?: string - type: { - name: string - value?: EnumValue[] - } + type: PropType defaultValue?: { value: string + computed: boolean } flowType?: { elements: FlowTypeElement[] @@ -61,7 +64,39 @@ export type TooltipComponent = React.ComponentType<{ children: React.ReactNode }> -const getValue = (value: string) => value.replace(/\'/g, '') +const extractTypeDescribedValue = (type: PropType): string => { + const { name, value } = type + + // instanceOf, computed shape, uknown enum + if (typeof value === 'string') { + return value + } + + // oneOf, oneOfType + if (Array.isArray(value)) { + return value.map(valueType => { + if (valueType.name === 'custom') { + return `custom(${valueType.raw})` + } + + return valueType.name || valueType.value + }).join(' | ') + } + + // arrayOf, objectOf + if (typeof value === 'object' && name !== 'shape') { + return value.name + } + + // shape + if (typeof value === 'object' && name === 'shape') { + // show only keys due to a recursive limitation + return `{ ${Object.keys(value).join(', ')} }` + } + + // untreated + return '' +} const getPropType = (prop: Prop, Tooltip?: TooltipComponent) => { const name = prop.flowType ? prop.flowType.name : prop.type.name @@ -75,7 +110,7 @@ const getPropType = (prop: Prop, Tooltip?: TooltipComponent) => { return prop.flowType ? ( {name} ) : ( - getValue(val.value)).join(' | ')}> + {name} )