-
Notifications
You must be signed in to change notification settings - Fork 114
/
Submodule.js
79 lines (74 loc) · 2.6 KB
/
Submodule.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React, { Component } from "react";
import PropTypes from "prop-types";
import { css } from "emotion";
import { sizes as iconSizes } from "@hig/icons";
import ThemeContext from "@hig/theme-context";
import { memoizeCreateButtonEventHandlers } from "@hig/utils";
import { AVAILABLE_TARGETS, targets } from "../targets";
import ExternalLinkIcon from "../presenters/ExternalLinkIcon";
import stylesheet from "./stylesheet";
export default class Submodule extends Component {
static propTypes = {
/** Indicates this submodule is currently active */
/* eslint-disable react/no-unused-prop-types */
active: PropTypes.bool,
/** URL to navigate to when clicking this submodule */
link: PropTypes.string,
/** Called when clicking on the submodule */
onClick: PropTypes.func,
/** Called when link is focused */
onFocus: PropTypes.func,
/** Called when hovering over the submodule */
onMouseOver: PropTypes.func,
/** Anchor target. Applicable only if link is provided */
target: PropTypes.oneOf(AVAILABLE_TARGETS),
/** Text to render */
title: PropTypes.string
};
createEventHandlers = memoizeCreateButtonEventHandlers();
render() {
const { link, onClick, onFocus, onMouseOver, target, title } = this.props;
const { handleClick, handleKeyDown } = this.createEventHandlers(onClick, {
// Allow default on hyperlinks to trigger navigation
preventDefault: !link
});
const Wrapper = link ? "a" : "div";
const isExternalLink = link && target === targets.BLANK;
const role = link ? undefined : "button";
const wrapperTarget = link ? target : undefined;
return (
<ThemeContext.Consumer>
{({ resolvedRoles, metadata }) => (
<Wrapper
className={css(stylesheet(this.props, resolvedRoles).wrapper)}
href={link}
onClick={handleClick}
onFocus={onFocus}
onKeyDown={handleKeyDown}
onMouseOver={onMouseOver}
role={role}
tabIndex="0"
target={wrapperTarget}
>
{title}
{isExternalLink ? (
<div
className={css(
stylesheet(this.props, resolvedRoles).externalIcon
)}
>
<ExternalLinkIcon
size={
metadata.densityId === "medium-density"
? iconSizes.PX_24
: iconSizes.PX_16
}
/>
</div>
) : null}
</Wrapper>
)}
</ThemeContext.Consumer>
);
}
}