import * as _ from 'lodash'; import * as React from 'react'; import { Link as ReactRounterLink } from 'react-router-dom'; import { Link as ScrollLink } from 'react-scroll'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; export interface LinkProps { to: string; type?: LinkType; shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; onMouseOver?: (event: React.MouseEvent) => void; onMouseLeave?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; containerId?: string; } /** * A generic link component which let's the developer render internal, external and scroll-to-hash links, and * their associated behaviors with a single link component. Many times we want a menu including a combination of * internal, external and scroll links and the abstraction of the differences of rendering each types of link * makes it much easier to do so. */ export const Link: React.StatelessComponent = ({ style, className, type, to, shouldOpenInNewTab, children, onMouseOver, onMouseLeave, onMouseEnter, containerId, }) => { const styleWithDefault = { textDecoration: 'none', ...style, }; switch (type) { case LinkType.External: return ( {children} ); case LinkType.ReactRoute: return ( {children} ); case LinkType.ReactScroll: return ( {children} ); default: throw new Error(`Unrecognized LinkType: ${type}`); } }; Link.defaultProps = { type: LinkType.ReactRoute, shouldOpenInNewTab: false, style: {}, className: '', onMouseOver: _.noop.bind(_), onMouseLeave: _.noop.bind(_), onMouseEnter: _.noop.bind(_), containerId: constants.DOCS_CONTAINER_ID, }; Link.displayName = 'Link';