Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Allow default link behavior when cmd or ctrl are used (https://github.com/woocommerce/woocommerce-admin/pull/5966) 

* Allow default link behavior when cmd or ctrl are used

* Convert Link to functional component

* Add alt and shift keys
This commit is contained in:
Joshua T Flowers 2020-12-29 11:13:20 -05:00 committed by GitHub
parent 7977fb0148
commit 0bc842f7c3
1 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
plugins/woocommerce-admin/packages/components/src/link/index.js
View File

@ -1,7 +1,6 @@
/**
* External dependencies
*/
import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import { partial } from 'lodash';
import { getHistory } from '@woocommerce/navigation';
@ -10,11 +9,22 @@ import { getHistory } from '@woocommerce/navigation';
* Use `Link` to create a link to another resource. It accepts a type to automatically
* create wp-admin links, wc-admin links, and external links.
*/
class Link extends Component {
function Link( { children, href, type, ...props } ) {
// @todo Investigate further if we can use <Link /> directly.
// With React Router 5+, <RouterLink /> cannot be used outside of the main <Router /> elements,
// which seems to include components imported from @woocommerce/components. For now, we can use the history object directly.
wcAdminLinkHandler( onClick, event ) {
const wcAdminLinkHandler = ( onClick, event ) => {
// If cmd, ctrl, alt, or shift are used, use default behavior to allow opening in a new tab.
if (
event.ctrlKey ||
event.metaKey ||
event.altKey ||
event.shiftKey
) {
return;
}
event.preventDefault();
// If there is an onclick event, execute it.
@ -26,29 +36,22 @@ class Link extends Component {
}
getHistory().push( event.target.closest( 'a' ).getAttribute( 'href' ) );
};
const passProps = {
...props,
'data-link-type': type,
};
if ( type === 'wc-admin' ) {
passProps.onClick = partial( wcAdminLinkHandler, passProps.onClick );
}
render() {
const { children, href, type, ...props } = this.props;
const passProps = {
...props,
'data-link-type': type,
};
if ( type === 'wc-admin' ) {
passProps.onClick = partial(
this.wcAdminLinkHandler,
passProps.onClick
);
}
return (
<a href={ href } { ...passProps }>
{ children }
</a>
);
}
return (
<a href={ href } { ...passProps }>
{ children }
</a>
);
}
Link.propTypes = {