75 lines
1.8 KiB
JavaScript
75 lines
1.8 KiB
JavaScript
/** @format */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import { Component } from '@wordpress/element';
|
|
import { ENTER, SPACE } from '@wordpress/keycodes';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* `MenuItem` is used to give the item an accessible wrapper, with the `menuitem` role and added keyboard functionality (`onInvoke`).
|
|
* `MenuItem`s can also be deemed "clickable", though this is disabled by default because generally the inner component handles
|
|
* the click event.
|
|
*/
|
|
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 = {
|
|
/**
|
|
* A renderable component (or string) which will be displayed as the content of this item. Generally a `ToggleControl`.
|
|
*/
|
|
children: PropTypes.node,
|
|
/**
|
|
* Boolean to control whether the MenuItem should handle the click event. Defaults to false, assuming your child component
|
|
* handles the click event.
|
|
*/
|
|
isClickable: PropTypes.bool,
|
|
/**
|
|
* A function called when this item is activated via keyboard ENTER or SPACE; or when the item is clicked
|
|
* (only if `isClickable` is set).
|
|
*/
|
|
onInvoke: PropTypes.func.isRequired,
|
|
};
|
|
|
|
MenuItem.defaultProps = {
|
|
isClickable: false,
|
|
};
|
|
|
|
export default MenuItem;
|