diff options
author | 2017-10-21 21:49:22 -0300 | |
---|---|---|
committer | 2017-10-21 21:49:22 -0300 | |
commit | 80f12d79251d28679becff126a4da095eb52f640 (patch) | |
tree | ca5acdd2a82fe12f034b3816db2d3d0eb1bb5afd /src/components/ui/StatusBarTargetUrl.js | |
parent | Move linux distribution specific dependencies to /docs (diff) | |
download | ferdium-app-80f12d79251d28679becff126a4da095eb52f640.tar.gz ferdium-app-80f12d79251d28679becff126a4da095eb52f640.tar.zst ferdium-app-80f12d79251d28679becff126a4da095eb52f640.zip |
Show url when mouse enters a link
This resolves #47
Diffstat (limited to 'src/components/ui/StatusBarTargetUrl.js')
-rw-r--r-- | src/components/ui/StatusBarTargetUrl.js | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js new file mode 100644 index 000000000..1c8dce0f7 --- /dev/null +++ b/src/components/ui/StatusBarTargetUrl.js | |||
@@ -0,0 +1,42 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import classnames from 'classnames'; | ||
5 | |||
6 | @observer | ||
7 | export default class StatusBarTargetUrl extends Component { | ||
8 | static propTypes = { | ||
9 | // eslint-disable-next-line | ||
10 | className: PropTypes.string, | ||
11 | position: PropTypes.string, | ||
12 | text: PropTypes.string, | ||
13 | }; | ||
14 | |||
15 | static defaultProps = { | ||
16 | className: '', | ||
17 | position: 'bottom', | ||
18 | text: '', | ||
19 | }; | ||
20 | |||
21 | render() { | ||
22 | const { | ||
23 | className, | ||
24 | position, | ||
25 | text, | ||
26 | } = this.props; | ||
27 | |||
28 | return ( | ||
29 | <div | ||
30 | className={classnames({ | ||
31 | 'status-bar-target-url': true, | ||
32 | [`status-bar-target-url--${position}`]: true, | ||
33 | [`${className}`]: true, | ||
34 | })} | ||
35 | > | ||
36 | <div className="status-bar-target-url__content"> | ||
37 | {text} | ||
38 | </div> | ||
39 | </div> | ||
40 | ); | ||
41 | } | ||
42 | } | ||