diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/react-docs/src/components/type.tsx | 62 | ||||
-rw-r--r-- | packages/react-docs/src/components/type_definition.tsx | 1 | ||||
-rw-r--r-- | packages/react-shared/src/components/anchor_title.tsx | 34 |
3 files changed, 54 insertions, 43 deletions
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 1ae1324c6..d579449f4 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -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 ( diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx index 9a3e50a1b..e1c4f1f2b 100644 --- a/packages/react-docs/src/components/type_definition.tsx +++ b/packages/react-docs/src/components/type_definition.tsx @@ -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> diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index dabdfff9b..0bdf61d44 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -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> ); } |