import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types';
import { errorUtils } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { Link as ScrollLink } from 'react-scroll';
import * as ReactTooltip from 'react-tooltip';
import { DocsInfo } from '../docs_info';
import { Signature } from './signature';
import { TypeDefinition } from './type_definition';
const basicJsTypes = ['string', 'number', 'undefined', 'null', 'boolean'];
const basicSolidityTypes = ['bytes', 'bytes4', 'bytes32', 'uint8', 'uint256', 'address'];
const defaultProps = {};
export interface TypeProps {
type: TypeDef;
docsInfo: DocsInfo;
sectionName: string;
typeDefinitionByName?: TypeDefinitionByName;
isInPopover: boolean;
}
// The return type needs to be `any` here so that we can recursively define <Type /> components within
// <Type /> components (e.g when rendering the union type).
export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
const type = props.type;
const isReference = type.typeDocType === TypeDocTypes.Reference;
const isArray = type.typeDocType === TypeDocTypes.Array;
let typeNameColor = 'inherit';
let typeName: string | React.ReactNode;
let typeArgs: React.ReactNode[] = [];
switch (type.typeDocType) {
case TypeDocTypes.Intrinsic:
case TypeDocTypes.Unknown:
typeName = type.name;
typeNameColor = colors.orange;
break;
case TypeDocTypes.Reference:
typeName = type.name;
typeArgs = _.map(type.typeArguments, (arg: TypeDef) => {
if (arg.typeDocType === TypeDocTypes.Array) {
const key = `type-${arg.elementType.name}-${arg.elementType.typeDocType}`;
return (
<span>
<Type
key={key}
type={arg}
sectionName={props.sectionName}
typeDefinitionByName={props.typeDefinitionByName}
docsInfo={props.docsInfo}
isInPopover={props.isInPopover}
/>[]
</span>
);
} else {
const subType = (
<Type
key={`type-${arg.name}-${arg.value}-${arg.typeDocType}`}
type={arg}
sectionName={props.sectionName}
typeDefinitionByName={props.typeDefinitionByName}
docsInfo={props.docsInfo}
isInPopover={props.isInPopover}
/>
);
return subType;
}
});
break;
case TypeDocTypes.StringLiteral:
typeName = `'${type.value}'`;
typeNameColor = colors.green;
break;
case TypeDocTypes.Array:
typeName = type.elementType.name;
if (_.includes(basicJsTypes, typeName) || _.includes(basicSolidityTypes, typeName)) {
typeNameColor = colors.orange;
}
break;
case TypeDocTypes.Union:
const unionTypes = _.map(type.types, t => {
return (
<Type
key={`type-${t.name}-${t.value}-${t.typeDocType}`}
type={t}
sectionName={props.sectionName}
typeDefinitionByName={props.typeDefinitionByName}
docsInfo={props.docsInfo}
isInPopover={props.isInPopover}
/>
);
});
typeName = _.reduce(unionTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
return [prev, '|', curr];
});
break;
case TypeDocTypes.Reflection:
if (!_.isUndefined(type.method)) {
typeName = (
<Signature
name={type.method.name}
returnType={type.method.returnType}
parameters={type.method.parameters}
typeParameter={type.method.typeParameter}
sectionName={props.sectionName}
shouldHideMethodName={true}
shouldUseArrowSyntax={true}
docsInfo={props.docsInfo}
typeDefinitionByName={props.typeDefinitionByName}
isInPopover={props.isInPopover}
/>
);
} else if (!_.isUndefined(type.indexSignature)) {
const is = type.indexSignature;
const param = (
<span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
{is.keyName}:{' '}
<Type
type={is.keyType}
sectionName={props.sectionName}
docsInfo={props.docsInfo}
typeDefinitionByName={props.typeDefinitionByName}
isInPopover={props.isInPopover}
/>
</span>
);
typeName = (
<span key={`indexSignature-${type.name}-${is.keyType.name}`}>
{'{'}[{param}]: {is.valueName}
{'}'}
</span>
);
} else {
throw new Error(`Unrecognized Reflection type that isn't a Method nor an Index Signature`);
}
break;
case TypeDocTypes.TypeParameter:
typeName = type.name;
break;
case TypeDocTypes.Intersection:
const intersectionsTypes = _.map(type.types, t => {
return (
<Type
key={`type-${t.name}-${t.value}-${t.typeDocType}`}
type={t}
sectionName={props.sectionName}
typeDefinitionByName={props.typeDefinitionByName}
docsInfo={props.docsInfo}
isInPopover={props.isInPopover}
/>
);
});
typeName = _.reduce(intersectionsTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
return [prev, '&', curr];
});
break;
case TypeDocTypes.Tuple:
const tupleTypes = _.map(type.tupleElements, (t, i) => {
return (
<Type
key={`type-tuple-${t.name}-${t.typeDocType}-${i}`}
type={t}
sectionName={props.sectionName}
typeDefinitionByName={props.typeDefinitionByName}
docsInfo={props.docsInfo}
isInPopover={props.isInPopover}
/>
);
});
typeName = (
<div>
[{_.reduce(tupleTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
return [prev, ', ', curr];
})}]
</div>
);
break;
default:
throw errorUtils.spawnSwitchErr('type.typeDocType', type.typeDocType);
}
// HACK: Normalize BigNumber to simply BigNumber. For some reason the type
// name is unpredictably one or the other.
if (typeName === 'BigNumber') {
typeName = 'BigNumber';
}
const commaSeparatedTypeArgs = _.reduce(typeArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
return [prev, ', ', curr];
});
const isExportedClassReference = !!props.type.isExportedClassReference;
const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined;
if (!_.isUndefined(typeNameUrlIfExists)) {
typeName = (
<a
href={typeNameUrlIfExists}
target="_blank"
className="text-decoration-none"
style={{ color: colors.lightBlueA700 }}
>
{typeName}
</a>
);
} else if (
(isReference || isArray) &&
((props.typeDefinitionByName && props.typeDefinitionByName[typeName as string]) || isExportedClassReference)
) {
const id = Math.random().toString();
const typeDefinitionAnchorId = isExportedClassReference
? props.type.name
: `${props.docsInfo.typeSectionName}-${typeName}`;
typeName = (
<ScrollLink
to={typeDefinitionAnchorId}
offset={0}
hashSpy={true}
duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
containerId={sharedConstants.SCROLL_CONTAINER_ID}
>
{sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
<span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
) : (
<span
data-tip={true}
data-for={id}
style={{
color: colors.lightBlueA700,
cursor: 'pointer',
display: 'inline-block',
}}
>
{typeName}
<ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
<TypeDefinition
sectionName={props.sectionName}
customType={props.typeDefinitionByName[typeName as string]}
shouldAddId={false}
docsInfo={props.docsInfo}
typeDefinitionByName={props.typeDefinitionByName}
isInPopover={true}
/>
</ReactTooltip>
</span>
)}
</ScrollLink>
);
}
return (
<span>
<span style={{ color: typeNameColor }}>{typeName}</span>
{isArray && '[]'}
{!_.isEmpty(typeArgs) && (
<span>
{'<'}
{commaSeparatedTypeArgs}
{'>'}
</span>
)}
</span>
);
};
Type.defaultProps = defaultProps;