azure-devops-ui/Components/Link/Link.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./Link.css";
import * as React from "react";
import { FocusGroupContext } from '../../FocusGroup';
import { FocusZoneContext } from '../../FocusZone';
import { Tooltip } from '../../TooltipEx';
import { css, getSafeId, KeyCode } from '../../Util';
import { getTabIndex } from '../../Utilities/Focus';
export class Link extends React.Component {
    constructor() {
        super(...arguments);
        this.ref = React.createRef();
        this.onClick = (event) => {
            this.handleActivation(event);
        };
        this.onKeyPress = (event) => {
            if (!this.props.href && event.which === KeyCode.enter) {
                // We only want to handle keyboard interaction if there is no href
                this.handleActivation(event);
            }
        };
        this.onFocus = (event) => {
            if (this.props.onFocus) {
                this.props.onFocus(event);
            }
            if (this.props.id) {
                this.context.onFocus(this.props.id);
            }
        };
    }
    render() {
        return (React.createElement(FocusZoneContext.Consumer, null, focusZoneContext => {
            const { props } = this;
            const { ariaDescribedBy, ariaLabel, ariaLabelledBy, ariaExpanded, ariaHasPopup, ariaSelected, className, draggable, excludeFocusZone, target, dataIsFocusable } = props;
            let { rel, role } = props;
            let TagType = "a";
            // If the link is targetting an external window or tab and no explicit rel
            // attribute was supplied we will set noopener.
            if (target && !rel) {
                rel = "noopener";
            }
            if (!props.href && !props.role) {
                role = "button";
            }
            if (!props.href) {
                TagType = "span";
            }
            let link = (React.createElement(TagType, { ref: this.ref, "aria-describedby": getSafeId(ariaDescribedBy), "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-selected": ariaSelected, className: css(className, "bolt-link", props.disabled && "disabled", props.subtle && "subtle", props.underline && "underline", props.removeUnderline && "no-underline-link"), "data-focuszone": !excludeFocusZone && focusZoneContext.focuszoneId, "data-is-focusable": dataIsFocusable, download: props.download, draggable: draggable, href: props.href, id: getSafeId(props.id), onBlur: props.onBlur, onClick: this.onClick, onFocus: this.onFocus, onKeyPress: this.onKeyPress, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onMouseOver: props.onMouseOver, onTouchEnd: props.onTouchEnd, onTouchMove: props.onTouchMove, onTouchStart: props.onTouchStart, rel: rel, role: role, tabIndex: getTabIndex(this.props, this.context), target: target }, this.props.children));
            if (props.tooltipProps) {
                link = React.createElement(Tooltip, Object.assign({}, props.tooltipProps), link);
            }
            return link;
        }));
    }
    focus() {
        this.ref.current && this.ref.current.focus();
    }
    handleActivation(event) {
        if (!event.defaultPrevented) {
            if (this.props.disabled) {
                event.preventDefault();
            }
            else {
                this.props.onClick && this.props.onClick(event);
            }
        }
    }
}
Link.contextType = FocusGroupContext;