Added click modifiers, target prop (plotly#767)

* Added `ctrlKey` conditional

* Added other modifiers.

* Added target prop.

Author: HammadTheOne

packages/dash-core-components/CHANGELOG.md

@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - [#766](https://github.com/plotly/dash-core-components/pull/766) Update from React 16.8.6 to 16.13.0
 - [#768](https://github.com/plotly/dash-core-components/pull/768) Added title property to dcc.Link
 - [#776](https://github.com/plotly/dash-core-components/pull/776) Update dcc.Link to set href as children if children not defined. Makes href a required prop as well.
+- [#767](https://github.com/plotly/dash-core-components/pull/767) Updated dcc.Link to respond to click modifiers, and added a target prop.
 
 ## [1.8.1] -2020-02-27
 ### Added

packages/dash-core-components/src/components/Link.react.js

@@ -42,9 +42,17 @@ export default class Link extends Component {
     }
 
     updateLocation(e) {
+        const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
+        const {href, refresh, target} = this.props;
+
+        if (hasModifiers) {
+            return;
+        }
+        if (target !== '_self' && !isNil(target)) {
+            return;
+        }
         // prevent anchor from updating location
         e.preventDefault();
-        const {href, refresh} = this.props;
         if (refresh) {
             window.location.pathname = href;
         } else {
@@ -64,6 +72,7 @@ export default class Link extends Component {
             loading_state,
             children,
             title,
+            target,
         } = this.props;
         /*
          * ideally, we would use cloneElement however
@@ -81,6 +90,7 @@ export default class Link extends Component {
                 href={href}
                 onClick={e => this.updateLocation(e)}
                 title={title}
+                target={target}
             >
                 {isNil(children) ? href : children}
             </a>
@@ -116,6 +126,10 @@ Link.propTypes = {
      * information.
      */
     title: PropTypes.string,
+    /**
+     * Specifies where to open the link reference.
+     */
+    target: PropTypes.string,
     /**
      * The children of this component
      */