This repository has been archived by the owner on Jan 27, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.js
109 lines (92 loc) · 2.61 KB
/
index.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import cx from 'classnames';
import { showTooltip } from 'features/Gw2/actions';
import ArmoryBadge from 'common/components/ArmoryBadge';
import MouseFollow from '../MouseFollow';
import AmuletTooltip from './Amulet';
import ItemTooltip from './Item';
import SkillTooltip from './Skill';
import SkinTooltip from './Skin';
import SimpleTooltip from './Simple';
import Background from './Background';
import AchievementTooltip from './Achievement';
import GuildUpgradeTooltip from './GuildUpgradeTooltip';
import styles from './styles.less';
const selector = createSelector(
state => state.tooltip,
tooltip => ({
tooltip,
})
);
export type Props = {
tooltip?: {
show: boolean,
type: string,
data: Object,
},
showTooltip?: boolean => void,
showBadge?: boolean,
className?: string,
};
export default connect(
selector,
{
showTooltip,
}
)(
class Tooltip extends Component<Props> {
props: Props;
close = () => {
this.props.showTooltip && this.props.showTooltip(false);
};
render() {
const { tooltip, showBadge, className } = this.props;
if (!tooltip || !tooltip.show) return null;
let content;
if (typeof tooltip.data === 'string' || tooltip.data.error) {
const message = typeof tooltip.data === 'string' ? tooltip.data : tooltip.data.error;
content = (
<Background>
<SimpleTooltip data={message} />
</Background>
);
} else {
switch (tooltip.type) {
case 'items':
content = <ItemTooltip data={tooltip.data} />;
break;
case 'amulets':
content = <AmuletTooltip data={tooltip.data} />;
break;
case 'trait':
case 'skill':
content = <SkillTooltip data={tooltip.data} />;
break;
case 'achievement':
content = <AchievementTooltip data={tooltip.data} />;
break;
case 'skins':
content = <SkinTooltip data={tooltip.data} />;
break;
case 'guildUpgrade':
content = <GuildUpgradeTooltip data={tooltip.data} />;
}
}
return (
<MouseFollow onTouchEnd={this.close}>
<div className={cx(styles.root, className)}>
{content}
{showBadge && (
<Background>
<ArmoryBadge className={styles.badge} />
</Background>
)}
</div>
</MouseFollow>
);
}
}
);