diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/ui/Link.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/ui/Link.js')
-rw-r--r-- | src/components/ui/Link.js | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js new file mode 100644 index 000000000..f5da921fa --- /dev/null +++ b/src/components/ui/Link.js | |||
@@ -0,0 +1,78 @@ | |||
1 | import { shell } from 'electron'; | ||
2 | import React, { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { inject, observer } from 'mobx-react'; | ||
5 | import { RouterStore } from 'mobx-react-router'; | ||
6 | import classnames from 'classnames'; | ||
7 | |||
8 | import { oneOrManyChildElements } from '../../prop-types'; | ||
9 | import { matchRoute } from '../../helpers/routing-helpers'; | ||
10 | |||
11 | // TODO: create container component for this component | ||
12 | |||
13 | @inject('stores') @observer | ||
14 | export default class Link extends Component { | ||
15 | onClick(e) { | ||
16 | if (this.props.target === '_blank') { | ||
17 | e.preventDefault(); | ||
18 | shell.openExternal(this.props.to); | ||
19 | } | ||
20 | } | ||
21 | |||
22 | render() { | ||
23 | const { | ||
24 | children, | ||
25 | stores, | ||
26 | to, | ||
27 | className, | ||
28 | activeClassName, | ||
29 | strictFilter, | ||
30 | } = this.props; | ||
31 | const { router } = stores; | ||
32 | |||
33 | let filter = `${to}(*action)`; | ||
34 | if (strictFilter) { | ||
35 | filter = `${to}`; | ||
36 | } | ||
37 | |||
38 | const match = matchRoute(filter, router.location.pathname); | ||
39 | |||
40 | const linkClasses = classnames({ | ||
41 | [`${className}`]: true, | ||
42 | [`${activeClassName}`]: match, | ||
43 | }); | ||
44 | |||
45 | return ( | ||
46 | <a | ||
47 | href={router.history.createHref(to)} | ||
48 | className={linkClasses} | ||
49 | onClick={e => this.onClick(e)} | ||
50 | > | ||
51 | {children} | ||
52 | </a> | ||
53 | ); | ||
54 | } | ||
55 | } | ||
56 | |||
57 | Link.wrappedComponent.propTypes = { | ||
58 | stores: PropTypes.shape({ | ||
59 | router: PropTypes.instanceOf(RouterStore).isRequired, | ||
60 | }).isRequired, | ||
61 | children: PropTypes.oneOfType([ | ||
62 | oneOrManyChildElements, | ||
63 | PropTypes.string, | ||
64 | ]).isRequired, | ||
65 | to: PropTypes.string.isRequired, | ||
66 | className: PropTypes.string, | ||
67 | activeClassName: PropTypes.string, | ||
68 | strictFilter: PropTypes.bool, | ||
69 | target: PropTypes.string, | ||
70 | }; | ||
71 | |||
72 | Link.wrappedComponent.defaultProps = { | ||
73 | className: '', | ||
74 | activeClassName: '', | ||
75 | strictFilter: false, | ||
76 | target: '', | ||
77 | openInBrowser: false, | ||
78 | }; | ||