crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Nested a tag warning in console by not rendering a tags within type definition popovers

Browse Source
This commit is contained in:
Fabio Berger
2018-10-15 12:20:30 +01:00
parent bf9af95654
commit b3a323efa1
3 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/react-docs/src/components/type.tsx
View File

@@ -204,7 +204,9 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
const isExportedClassReference = !!props.type.isExportedClassReference;
const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined;
if (!_.isUndefined(typeNameUrlIfExists)) {
typeName = (
typeName = props.isInPopover ? (
<span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
) : (
<Link to={typeNameUrlIfExists} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
{typeName}
</Link>
@@ -218,39 +220,41 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
? 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}
>
<span>
{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',
}}
<ScrollLink
to={typeDefinitionAnchorId}
offset={0}
hashSpy={true}
duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
containerId={sharedConstants.SCROLL_CONTAINER_ID}
>
{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>
<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>
)}
</ScrollLink>
</span>
);
}
return (

1
packages/react-docs/src/components/type_definition.tsx
View File

@@ -124,6 +124,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
title={`${typePrefix} ${customType.name}`}
id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
shouldShowAnchor={this.state.shouldShowAnchor}
isDisabled={this.props.isInPopover ? true : false}
/>
<div style={{ fontSize: 16 }}>
<pre>

34
packages/react-shared/src/components/anchor_title.tsx
View File

@@ -15,6 +15,7 @@ export interface AnchorTitleProps {
id: string;
headerSize: HeaderSizes;
shouldShowAnchor: boolean;
isDisabled?: boolean;
}
export interface AnchorTitleState {
@@ -40,6 +41,9 @@ const styles: Styles = {
};
export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
public static defaultProps: Partial<AnchorTitleProps> = {
isDisabled: false,
};
constructor(props: AnchorTitleProps) {
super(props);
this.state = {
@@ -67,20 +71,22 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
<div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}>
{this.props.title}
</div>
<ScrollLink
to={this.props.id}
hashSpy={true}
offset={headerSizeToScrollOffset[this.props.headerSize]}
duration={constants.DOCS_SCROLL_DURATION_MS}
containerId={constants.SCROLL_CONTAINER_ID}
>
<i
className="zmdi zmdi-link"
style={{ ...styles.anchor, opacity }}
onMouseOver={this._setHoverState.bind(this, true)}
onMouseOut={this._setHoverState.bind(this, false)}
/>
</ScrollLink>
{!this.props.isDisabled && (
<ScrollLink
to={this.props.id}
hashSpy={true}
offset={headerSizeToScrollOffset[this.props.headerSize]}
duration={constants.DOCS_SCROLL_DURATION_MS}
containerId={constants.SCROLL_CONTAINER_ID}
>
<i
className="zmdi zmdi-link"
style={{ ...styles.anchor, opacity }}
onMouseOver={this._setHoverState.bind(this, true)}
onMouseOut={this._setHoverState.bind(this, false)}
/>
</ScrollLink>
)}
</div>
);
}