woocommerce/plugins/woocommerce-admin/client/components/ellipsis-menu/menu-item.js

59 lines
1.1 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { Component } from '@wordpress/element';
import { ENTER, SPACE } from '@wordpress/keycodes';
import PropTypes from 'prop-types';
class MenuItem extends Component {
constructor() {
super( ...arguments );
this.onClick = this.onClick.bind( this );
this.onKeyDown = this.onKeyDown.bind( this );
}
onClick( event ) {
const { isClickable, onInvoke } = this.props;
if ( isClickable ) {
event.preventDefault();
onInvoke();
}
}
onKeyDown( event ) {
if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
event.preventDefault();
this.props.onInvoke();
}
}
render() {
const { children } = this.props;
return (
<div
role="menuitem"
tabIndex="0"
onKeyDown={ this.onKeyDown }
onClick={ this.onClick }
className="woocommerce-ellipsis-menu__item"
>
{ children }
</div>
);
}
}
MenuItem.propTypes = {
children: PropTypes.node,
isClickable: PropTypes.bool,
onInvoke: PropTypes.func.isRequired,
};
MenuItem.defaultProps = {
isClickable: false,
};
export default MenuItem;